Dlaczego wysokość kontenera nie jest dziedziczona, gdy ma rozmiar min-height?

Próbuję sprawić, aby kontener wypełniał całą stronę (lub rzutnię, w zależności od tego, która wartość jest większa), ale wystąpiły problemy. Korzystam z zaleceń z tego wpisu: https://stackoverflow.com/a/17555766, aby ustawić <html> i <body> na 100% wysokości.Dlaczego wysokość kontenera nie jest dziedziczona, gdy ma rozmiar min-height?

Ale zauważyłem, że .Content div wypełnia tylko rzutnię gdy wysokość <body> jest ustawiony z height: 100%, ale nie z min-height: 100%. Dlaczego? Dlaczego .Content nie podnosi wysokości <body>, gdy jest ustawiona na min-height? Czy jest na to poprawka (bez bezwzględnego pozycjonowania lub stałych wysokości)?

html

<html> 
    <body> 
    <div class="Content">Content</div> 
    </body> 
</html>

css

* { 
    margin: 0; 
    padding: 0; 
} 

html { 
    height: 100%; 
} 

body { 
    /* does not work for .Content: */ 
    min-height: 100%; 
    /* does work for .Content: */ 
    /* height: 100%; */ 
    background: blue; 
} 

.Content { 
    background: red; 
    min-height: 100%; 
}

codepen: http://codepen.io/anon/pen/mJEMVX

P.s .: gdy wysokość <body> jest ustawiony z height: 100% zarówno min-height: 100% i height: 100% działać zgodnie z oczekiwaniami na .Content.

Źródło

2015-05-18 vkjb38sjhbv98h4jgvx98hah3fef

Domyślam się, że podstawową przyczyną jest okrągła zależność między wysokością ciała a wysokością treści. Wyobraź sobie, że po ".content" jest jeszcze jeden element. Teraz, jeśli zawartość rozszerza się do 100%, ciało również musi się rozwinąć, co spowodowałoby dalszy rozwój zawartości. Prawdopodobnie powodem, dla którego specyfikacja definiuje wysokość procentową w taki sposób, jak to robi, jest złamanie tej zależności cyklicznej. –

@Alexey Lebedev: Zgadza się. – BoltClock

Wartości procentowe odnoszą się do obliczonej właściwości elementu nadrzędnego. Zobacz spec. Podczas ustawiania tylko elementu min-height: 100% na elemencie body zgodnie z moją odpowiedzią na połączone pytanie, właściwość height pozostaje nietknięta z domyślną wartością auto. Właściwość min-height nie wpływa na obliczoną wartość właściwości height.

Z tego powodu min-height: 100% na twoim elemencie nie ma wysokości nadrzędnej, do której się odnosimy, więc nie zadziała. Po ustawieniu height: 100% na elemencie body, twój element będzie mógł odnieść się do tej wysokości dla własnego obliczenia procentowej wysokości.

Sposób naprawy zależy od rodzaju układu, który chcesz osiągnąć. Jedynym celem ustawienia elementu min-height: 100% na elemencie body jest umożliwienie jego rozwinięcia, gdy wysokość zawartości przekroczy wysokość widoku, co spowoduje przewinięcie paska. Jeśli twoja zawartość będzie zawsze dokładnie taka sama jak wysokość rzutni lub nie chcesz, aby body generował paski przewijania, jest to tak samo proste jak zastąpienie min-height: 100% przez height: 100% na body.

Źródło

2015-05-18 07:52:51 BoltClock

Dlaczego wysokość kontenera nie jest dziedziczona, gdy ma rozmiar min-height?

Odpowiedz

Powiązane problemy