prozentuale Höhe von absolut positionierten Blöcken

Question

Dies ist eine Frage, die eher aus Neugier als aus einem tatsächlichen Problem besteht. Ich versuche, CSS besser zu verstehen.

Die prozentuale Höhe (und Breite) sollte relativ zum umgebenden Block sein (see here).

Der umschließende Block eines absolut positionierten Blocks ist der nächstgelegene Vorgänger, der "positioniert" ist (dh absolut, relativ oder fest - see here).

So würde ich das innere div in diesem Beispiel erwartet, dass die gesamte zur Verfügung stehende Höhe zu überbrücken:

<div class="full-height"> 

    <div> 
    <div id="main-block"> 
    x 
    </div> 
    </div> 

</div> 

html, body, .full-height { 
    height: 100%; 
    position: relative; 
} 

mit diesem CSS:

#main-block { 
    height: 100%; 
    background-color: red; 
} 

Oder nur this fiddle nehmen.

Also, was ist hier los?

Answer 1

Sie haben Ihren Hauptblock nicht absolut positioniert. Tun Sie das und es wird die volle Höhe einnehmen.

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
    position:absolute 
 
}

<div class="full-height"> 
 

 
     <div> 
 
     <div id="main-block"> 
 
     x 
 
     </div> 
 
     </div> 
 

 
    </div>

Answer 2

Das Problem ist einfach, dass Sie eine zusätzliche <div> hatten, die das übergeordnete Element von #main-block ist, das keine festgelegte Höhe hat. Wenn Sie keine Höhe von 100% für dieses Element angeben, verwendet es nur die Standard Höhe. Für eine <div> ist das 0px.

#main-block versucht, 100% von der Höhe dieses zusätzlichen <div> (und nicht seine Eltern) zu nehmen. Betrachtet man #main-block Inhalt (x), wird es automatisch erweitert, damit der Inhalt angezeigt werden kann.

diese zusätzlichen <div> präsentiert eine ganze Seite mit einem roten Hintergrund, wie erwartet Entfernen:

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
}

<div class="full-height"> 
 
    <div id="main-block"> 
 
    x 
 
    </div> 
 
</div>

Umgekehrt hält diese zusätzliche Mutter <div> in und gibt ihnen eine Höhe von 100% wird Auch gibt Ihnen einen vollen roten Hintergrund. Beachten Sie, dass dies nur so viel Breite wie der #main-block Inhalt selbst gibt; wenn Sie es sein voller Breite wollen, müssen Sie die width neben dem height angeben:

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.full-height > div { 
 
    position: absolute; 
 
    height: 100%; 
 
}

<div class="full-height"> 
 
    <div> 
 
    <div id="main-block"> 
 
     x 
 
    </div> 
 
    </div> 
 
</div>

Und beachten Sie auch, dass die Standard Position für eine <div> ist static , nicht absolute.

Hoffe, das hilft! :)