Relative div height

Question

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

Was ich versucht 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 die 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; } 

offenbar einen Prozentwert für die Höhe verwendet, wird nicht so. Warum ist das so?

Answer 1

Fügen Sie diese auf Sie CSS:

html, body 
{ 
    height: 100%; 
} 

working Fiddle

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

und das gleiche gilt für body, seine Eltern seine html. html Eltern seine das Ansichtsfenster .. so, indem sie beide auf 100%, wrap kann auch eine prozentuale Höhe haben.

auch: Die Elemente haben einen Standard-Padding/Rand, der bewirkt, dass sie sich ein wenig mehr als die Höhe erstrecken, die Sie auf sie angewendet haben. (Was eine Bildlaufleiste) Sie

* 
{ 
    padding: 0; 
    margin: 0; 
} 

dass deaktivieren können.

Blick auf That Fiddle

Answer 2

Anteil in der Breite funktioniert, aber Prozentsatz in Höhe, wenn Sie eine bestimmte Höhe für alle Eltern in der abhängigen Schleife angeben wird nicht funktionieren ...

sehen: percentage in height doesn’t work?

Answer 3

fügen Sie diese zu Ihrer CSS:

html, body{height: 100%} 

und die max-heig ändern ht von #block12 zu height

Erklärung:

Grundsätzlich #wrap war 100% Höhe (relatives Maß), aber wenn Sie relative Maßnahmen verwenden sieht es für sein übergeordnetes Element der Maßnahme, und es ist normalerweise nicht definiert, weil es auch relativ ist. Die einzigen Elemente, die eine relative Höhe verwenden können, sind body und oder html selbst, abhängig vom Browser, die restlichen Elemente benötigen ein Elternelement mit absoluter Höhe.

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

Answer 4

Das div nimmt die Höhe seiner Eltern, aber da es keinen Inhalt hat (für Ihre divs erwartet) wird es nur so hoch wie sein Inhalt sein.

Sie müssen die Höhe des Körpers und html setzen:

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

Answer 5

Grundsätzlich liegt das Problem in Block12. Damit der Block1/2 die Gesamthöhe des Blocks 12 aufnimmt, muss er eine definierte Höhe haben. This stack overflow post erklärt das in sehr guten Details.

Wenn Sie also eine definierte Höhe für Block 12 festlegen, können Sie eine geeignete Höhe festlegen. Ich habe an example on JSfiddle erstellt, die Ihnen zeigt, dass die Blöcke nebeneinander schweben können, wenn der Block12 div auf einer Standardhöhe durch die Seite festgelegt ist.

Hier ist ein Beispiel mit einem Header und block3 div mit einigen Inhalten für Beispiele.

#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%; 

    } 

Answer 6

Wenn Sie auf einem Elemente eine Prozentsatz Höhe gesetzt, die übergeordneten Elemente ist nicht über Höhen eingestellt, haben die übergeordneten Elemente eine Standard-

height: auto; 

Sie den Browser fragt eine Höhe von einem berechnen undefinierter Wert. Da dies einem Nullwert entspricht, führt der Browser nichts mit der Höhe der untergeordneten Elemente aus.

Neben einer JavaScript-Lösung verwenden 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: Ein Problem
• Beispiel 2:
• Fix Höhe Beispiel 3: Tabellenverfahren

Aber: Bedenken Sie, dass die Tabellenmethode nur in allen modernen Browsern und Internet Explorer 8 und höher funktioniert. Als Ausweichlösung können Sie JavaScript verwenden.