wysokość: 100% lub min-wysokość: 100% dla elementów html i body?

Question

Podczas projektowania układów ustawiam elementów "height do 100%, ale w niektórych przypadkach to się nie udaje, więc co należy z tego użyć?

html, body { 
    height: 100%; 
} 

lub

html, body { 
    min-height: 100%; 
} 

Cóż, nie jest to opinia oparta jak każda metoda ma swoje wady, więc jaka jest zalecana do zrobienia i dlaczego?

Answer 1

Jeśli próbujesz zastosować obrazy tła do html i body, które wypełniają całe okno przeglądarki, nie. Użyj tego zamiast:

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
} 

Moje rozumowanie jest podana here (gdzie wyjaśnię całościowo jak zastosować tła w ten sposób):

Nawiasem mówiąc, dlatego trzeba określić height i min-height do html i body odpowiednio, ponieważ żaden element nie ma żadnej wewnętrznej wysokości. Oba są domyślnie height: auto. Okienko ma 100% wysokości, więc height: 100% jest pobierane z widoku, a następnie stosowane jako body jako minimum umożliwiające przewijanie zawartości.

Pierwszy sposób, używając height: 100% na obu, zapobiega body od rozszerza swoją zawartością raz zaczną rosnąć poza wysokością rzutni. Technicznie nie zapobiega to przewijaniu zawartości, ale powoduje, że body pozostawia lukę pod zakładką, co zwykle jest niepożądane.

Drugi sposób, z użyciem min-height: 100% na obu, nie powoduje body rozszerzyć do pełnej wysokości html ponieważ min-height z odsetek nie działa na body chyba html ma wyraźny height.

Dla kompletności section 10 of CSS2.1 zawiera wszystkie szczegóły, ale jest to niezwyklezawiłe czytać, więc można pominąć, jeśli nie jesteś zainteresowany w cokolwiek poza to, co ja tu wyjaśnione.