webentwicklung-frage-antwort-db.com.de

Relative div Höhe

Ich möchte die Ansicht in vier Teile aufteilen. Eine Kopfzeile oben mit voller Seitenbreite und fester Höhe. Die verbleibende Seite ist in zwei Blöcke gleicher Höhe aufgeteilt, die obere enthält zwei Blöcke gleicher Größe nebeneinander.

Was ich ausprobiert habe, ist (ohne Header):

<div id="wrap">
    <div id="block12">
        <div id="block1"></div>
        <div id="block2"></div>
        <div class="clear"></div>
    </div>
    <div id="block3"></div>
</div>

Und das CSS:

#wrap {
    width: 100%;
    height: 100%;
}

#block12 {
    width: 100%;
    max-height: 49%;
}

    #block1, #block2 {
        width: 50%;
        height: 100%;
        float: left;
        overflow-y: scroll;
    }


#block3 {
    width: 100%;
    height: 49%;
    overflow: auto;
    /*background: blue;*/
}

.clear { clear: both; }

Anscheinend funktioniert die Verwendung eines Prozentwerts für die Höhe nicht auf diese Weise. Warum ist das so?

htmlcssheightrelative
12
Explicat

füge dies dir CSS hinzu:

html, body
{
    height: 100%;
}

working Fiddle

wenn Sie zu wrap sagen, 100% zu sein, 100% von was? von seinem Elternteil (Körper), so muss sein Elternteil eine gewisse Höhe haben.

und dasselbe gilt für body, sein Elternteil seine html. html übergeordnet ist der Viewport .. Wenn Sie also beide auf 100% setzen, kann wrap auch eine prozentuale Höhe haben.

außerdem: Die Elemente haben einige Standardabstände abstände, so dass sie etwas größer sind als die Höhe, die Sie ihnen zugewiesen haben. (verursacht eine Bildlaufleiste) können Sie verwenden

*
{
    padding: 0;
    margin: 0;
}

das zu deaktivieren.

Schauen Sie sich an/- dass Fiddle

20
avrahamcool

Wenn Sie eine prozentuale Höhe für ein Element festlegen, für dessen übergeordnete Elemente keine Höhen festgelegt wurden, haben die übergeordneten Elemente einen Standardwert

height: auto;

Sie bitten den Browser, eine Höhe aus einem undefinierten Wert zu berechnen. Da dies einem Nullwert entsprechen würde, führt das dazu, dass der Browser nichts mit der Höhe der untergeordneten Elemente macht.

Neben der Verwendung einer JavaScript-Lösung können Sie diese tödliche einfache Tabellenmethode verwenden:

#parent3 {
    display: table;
    width: 100%;
}

#parent3 .between {
    display: table-row;
}

#parent3 .child {
    display: table-cell;
}

Vorschau auf http://jsbin.com/IkEqAfi/1

  • Beispiel 1: Funktioniert nicht
  • Beispiel 2: Höhe fixieren
  • Beispiel 3: Tabellenmethode

Aber: Beachten Sie, dass die Tabellenmethode nur in allen modernen Browsern und dem Internet Explorer 8 und höher ordnungsgemäß funktioniert. Als Fallback können Sie JavaScript verwenden.

5
Sven

fügen Sie dies Ihrem CSS hinzu:

html, body{height: 100%}

und ändern Sie die maximale Höhe von #block12 in height

Erklärung :

Im Grunde war #wrap 100% height (relatives Maß), aber wenn Sie relative Kennzahlen verwenden, wird nach dem Maß des übergeordneten Elements gesucht, und es ist normalerweise undefiniert, da es auch relativ ist. Die einzigen Elemente, die relative Höhen verwenden können, sind body und oder html selbst, abhängig vom Browser. Die restlichen Elemente benötigen ein übergeordnetes Element mit absoluter Höhe.

Aber seien Sie vorsichtig, es ist schwierig, mit relativen Höhen herumzuspielen. Sie müssen die Höhe des Headers richtig berechnen, damit Sie ihn von den Prozentsätzen des anderen Elements abziehen können.

3
aleation

Der Prozentsatz der Breite funktioniert, aber der Prozentsatz der Höhe funktioniert nicht, wenn Sie keine bestimmte Höhe für ein übergeordnetes Element in der abhängigen Schleife angeben.

Siehe dies: Prozentsatz der Höhe funktioniert nicht

2
Sachin

Das div nimmt die Höhe des übergeordneten Elements an. Da es jedoch keinen Inhalt hat (Expecpt für Ihre divs), ist es nur so groß wie sein Inhalt.

Sie müssen die Höhe des Körpers und des HTML-Codes festlegen:

HTML:

<div class="block12">
    <div class="block1">1</div>
    <div class="block2">2</div>
</div>
<div class="block3">3</div>

CSS:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.block12 {
    width: 100%;
    height: 50%;
    background: yellow;
    overflow: auto;
}
.block1, .block2 {
    width: 50%;
    height: 100%;
    display: inline-block;
    margin-right: -4px;
    background: lightgreen;
}
.block2 { background: lightgray }
.block3 {
    width: 100%;
    height: 50%;
    background: lightblue;
}

Und ein JSFiddle

0
LinkinTED

Grundsätzlich liegt das Problem in Block12. Damit der Block1/2 die Gesamthöhe des Blocks12 einnimmt, muss er eine definierte Höhe haben. Dieser Stack Overflow Post erklärt das sehr gut. 

Durch das Festlegen einer definierten Höhe für Block 12 können Sie eine korrekte Höhe festlegen. Ich habe ein Beispiel für JSfiddle erstellt, das Ihnen zeigt, dass die Blöcke nebeneinander geschoben werden können, wenn der Block12 div durch die Seite hindurch auf eine Standardhöhe gesetzt ist. 

Hier ist ein Beispiel, das einen Header und ein Block3-Div mit einigen Inhalten für Beispiele enthält.

#header{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:20%;
    }

    #block12{
    position:absolute;
    top:20%;
    width:100%;
    left:0;
    height:40%;
    }
    #block1,#block2{
    float:left;
    overflow-y: scroll;
    text-align:center;
    color:red;
    width:50%;
    height:100%;

    }
 #clear{clear:both;}
 #block3{
    position:absolute;
    bottom:0;
    color:blue;
    height:40%;

    }
0
ajfstuart