height: 100% czy min-height: 100% dla html i elementów body?

Projektując układy ustawiam html, bodyelementy heightna, 100%ale w niektórych przypadkach to się nie udaje, więc czego użyć?

html, body {
   height: 100%;
}

lub

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

Cóż, nie jest to oparte na opiniach, ponieważ każda metoda ma swoje wady, więc jaki jest zalecany sposób i dlaczego?

Jeśli starasz się stosować do obrazów tła htmli bodyże zapełniać całego okna przeglądarki, ani. Użyj tego zamiast tego:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

Moje rozumowanie jest podane tutaj (gdzie wyjaśniam całościowo, jak zastosować tła w ten sposób):

Nawiasem mówiąc, dlatego trzeba określić heighti min-heightna htmli bodyodpowiednio się tak, ponieważ nie ma żadnego elementu wewnętrzną wysokość. Obie są height: autodomyślne. Jest to rzutnia, która ma 100% wysokości, więc height: 100%jest pobierana z widoku, a następnie stosowana bodyjako minimum, aby umożliwić przewijanie treści.

Pierwszy sposób, użycie height: 100%na obu, zapobiega bodyrozszerzaniu się wraz z zawartością, gdy zaczną rosnąć poza wysokość widoku. Z technicznego punktu widzenia nie zapobiega to przewijaniu zawartości, ale powoduje bodypozostawienie luki pod zakładką, co jest zwykle niepożądane.

Drugi sposób, użycie min-height: 100%na obu, nie powoduje bodyrozwinięcia do pełnej wysokości, htmlponieważ min-heightz wartością procentową nie działa, bodychyba że htmlma to wyraźne height.

Ze względu na kompletność, sekcja 10 CSS2.1 zawiera wszystkie szczegóły, ale jest to bardzo zawiła lektura, więc możesz ją pominąć, jeśli nie interesuje Cię nic poza tym, co tutaj wyjaśniłem.

Możesz użyć vhjednostki wysokości rzutni ( ):

body {
    min-height: 100vh;
}

Jest zależny od ekranu, a nie od wzrostu nadrzędnego, więc nie potrzebujesz wysokości html: 100%.