Spraw, aby ciało miało 100% wysokości przeglądarki

844

Chcę, aby ciało miało 100% wysokości przeglądarki. Czy mogę to zrobić za pomocą CSS?

Próbowałem ustawienie height: 100%, ale to nie działa.

Chcę ustawić kolor tła strony, aby wypełnić całe okno przeglądarki, ale jeśli strona ma mało treści, na dole pojawia się brzydki biały pasek.

bodyofheat
źródło

Odpowiedzi:

1089

Spróbuj również ustawić wysokość elementu HTML na 100%.

html, 
body {
    height: 100%;
}

Ciało oczekuje od swojego rodzica (HTML) sposobu skalowania właściwości dynamicznej, więc element HTML musi mieć również ustawioną wysokość.

Jednak zawartość ciała prawdopodobnie będzie musiała zmieniać się dynamicznie. Ustawienie minimalnej wysokości na 100% pozwoli osiągnąć ten cel.

html {
  height: 100%;
}
body {
  min-height: 100%;
}
BentOnCoding
źródło
6
dzięki, wydaje się, że to usuwa biały pasek na krótkich stronach, ale teraz na stronach, których wysokość przekracza wysokość okna przeglądarki, na dole pojawia się biały pasek 20px: |
bodyofheat,
48
ok dowiedziałem się! działa, jeśli dodać HTML ciało {min wysokość: 100%;}: D
bodyofheat
12
Uwaga: jeśli używasz body {min-height}wersji, nie możesz użyć .body-child{height: 100%}sztuczki.
Salman,
14
najlepsza odpowiedź to CSS3, używając vh-> body { height: 100vh }- sprawdź odpowiedź tutaj stackoverflow.com/a/25829844/2680216
Adriano Resende
2
@bFunc Mam ten problem z chromem. html {height: 100%;} body {height: auto} wykonuj zadanie.
GBMan
217

Jako alternatywę dla ustawienia zarówno wysokości elementu, jak htmli bodyelementu 100%, można również użyć procentowej długości rzutni.

5.1.2 Długości procentowe rzutni: jednostki „vw”, „vh”, „vmin”, „vmax”

Długości procentowe rzutni są względne do rozmiaru początkowego bloku zawierającego. Gdy wysokość lub szerokość początkowego bloku zawierającego zostanie zmieniona, są one odpowiednio skalowane.

W tym przypadku możesz użyć wartości 100vh- która jest wysokością rzutni.

Przykład tutaj

body {
  height: 100vh;
  padding: 0;
}
body {
  min-height: 100vh;
  padding: 0;
}

Jest to obsługiwane w większości nowoczesnych przeglądarek - pomoc można znaleźć tutaj .

Josh Crozier
źródło
4
Oprócz tego, że jest to bardzo proste, dobrze jest również, że przyjmujemy nowe praktyki.
Pan Wangperawong
3
@niaster Zdecydowanie się zgadzam. Obsługa przeglądarek już się poprawiła, odkąd opublikowałem również tę odpowiedź :)
Josh Crozier
1
@ incarnate Taa .. szkoda, że ​​nie jest :) Wygląda na to, że ostatni raz OP był online w dniu 11.11.11 (data zadania pytania ...) Wątpię więc, żeby to się zmieniło.
Josh Crozier
18
Nie jestem pewien, dlaczego musimy zacząć „przyjmować nowe praktyki”, kiedy stara praktyka działa dobrze. Nie ma w tym żadnej korzyści: kod nie jest mniejszy, ani nie działa lepiej, a wciąż istnieją przeglądarki, które nie obsługują vw / vh.
cimmanon
3
Arkusz stylów użytkownika przeglądarki Chrome domyślnie dodaje do treści margines 8px (nie jestem pewien co do innych przeglądarek), więc musiałem go również dodać, margin: 0;aby uniknąć stałego pionowego paska przewijania po prawej stronie.
Andy Raddatz,
121

Jeśli masz obraz tła, ustaw go w zamian:

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

Zapewnia to, że znacznik body może nadal rosnąć, gdy zawartość jest wyższa niż rzutnia, a obraz tła będzie się powtarzał / przewijał / cokolwiek, gdy zaczniesz przewijać w dół.

Pamiętaj, że jeśli musisz wspierać IE6, musisz znaleźć sposób, aby wcisnąć się w height:100%ciało, IE6 i heighttak traktuje min-heighttak.

Angry Dan
źródło
Działa również, gdy pod ciałem znajduje się globalny Flexbox (body> # flexbox-wrapper)
justnorris
2
To jest poprawna odpowiedź, ponieważ zaakceptowana odpowiedź nie wzrośnie, ponieważ zawartość wydłuża się o więcej niż jeden ekran.
SimplGy
Dziękuję bardzo, Angry Dan, że ta brzydka biała przestrzeń na dole mojej strony zniknęła!
Boris Burkov
Oczywiście, ponieważ postawiono to pytanie, wymiary oparte na portach widoków stały się Rzeczą. Więc teraz możesz to zrobićbody{min-height: 100vh}
Angry Dan
Musisz także body { height: auto; }nie wyświetlać pasków przewijania w FireFox. poza tym działa idealnie.
Torxed 27.01.16
82

Jeśli chcesz zachować marginesy na ciele i nie chcesz pasków przewijania, użyj następującego css:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

Ustawienie body {min-height:100%} daje paski przewijania.

Zobacz demo na http://jsbin.com/aCaDahEK/2/edit?html,output .

Daniel Patru
źródło
7
Dziękuję za jedyną działającą odpowiedź :) Zakładam, że „absolut” sprawił, że zadziałało
Dmitrij Matwejew
Działa dobrze dla mnie w przeglądarce Firefox bez pasków przewijania, dziękuję. Przyjęta odpowiedź nie.
Andrew
@Andrew Dziwne, to daje paski przewijania w FireFox. To, czego potrzebujesz jednak do zaakceptowanej odpowiedzi, znajduje się również height: auto;w bodyklauzuli, aby pojawiały się paski przewijania.
Torxed 27.01.16
@Torxed Nadal dostaję paski przewijania w FireFox. Dodanie automatycznego ustawienia do wysokości nie działało dla mnie :(
Travis Crum
To nie działało dla mnie w Chrome 56.0.2924.87 (64-bit).
Ryan,
30
html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
}
Kocia ryba
źródło
24

Po przetestowaniu różnych scenariuszy uważam, że jest to najlepsze rozwiązanie:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

Jest dynamiczny, że htmli te bodyelementy będą rozwijać się automatycznie, jeśli ich zawartość przepełnienie. Przetestowałem to w najnowszej wersji przeglądarki Firefox, Chrome i IE 11.

Zobacz pełne skrzypce tutaj (dla hejterów przy stole, zawsze możesz go zmienić, aby użyć div):

https://jsfiddle.net/71yp4rh1/9/


Biorąc to pod uwagę, istnieje kilka problemów z zamieszczonymi tutaj odpowiedziami .

html, body {
    height: 100%;
}

Użycie powyższego CSS spowoduje, że HTML i element body NIE zostaną automatycznie rozwinięte, jeśli ich zawartość przepełni się, jak pokazano tutaj:

https://jsfiddle.net/9vyy620m/4/

Podczas przewijania zauważ powtarzające się tło? Dzieje się tak, ponieważ wysokość elementu ciała NIE wzrosła z powodu przepełnienia stołu podrzędnego. Dlaczego nie rozwija się jak każdy inny element bloku? Nie jestem pewny. Myślę, że przeglądarki niepoprawnie sobie z tym radzą.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Ustawienie minimalnej wysokości 100% na ciele, jak pokazano powyżej, powoduje inne problemy. Jeśli to zrobisz, nie możesz określić, że div dziecka lub tabela zajmują procentową wysokość, jak pokazano tutaj:

https://jsfiddle.net/aq74v2v7/4/

Mam nadzieję, że to komuś pomoże. Myślę, że przeglądarki niepoprawnie sobie z tym radzą. Spodziewałbym się, że wysokość ciała automatycznie dostosuje się do wzrostu, jeśli jego dzieci przepełnią się. Nie wydaje się to jednak, gdy używasz 100% wysokości i 100% szerokości.

Posiadać
źródło
3
Próbowałem wszystkich wysoko głosowanych odpowiedzi na tej stronie, ale żadna nie zadziałała. Ten zrobił!
Ryan,
Ta odpowiedź powinna być zaakceptowana. To też height: 100vhnie jest rozwiązanie. Ustawienie górnego kontenera na 100vhwysoki i 100vwmoże powodować problemy, jeśli kontener ma paski przewijania - wówczas będzie większy niż powinien (i może powodować, że paski przewijania będą niepotrzebnie widoczne). Te height: 100vhrównież źródłem problemów dla nas na nowszych urządzeniach z Androidem (np Xiaomi Mi 9 z Androidem 9), gdzie pojemnik byłby większy niż samego ekranu i może sprawić niepotrzebny pionowy pasek przewijania do treści dokumentu.
jtompl
21

To, czego używam na początku dosłownie każdego pliku CSS, którego używam, to:

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

Margines 0 zapewnia, że ​​elementy HTML i BODY nie są automatycznie pozycjonowane przez przeglądarkę, aby mieć trochę miejsca po ich lewej lub prawej stronie.

Dopełnienie 0 zapewnia, że ​​elementy HTML i BODY nie popychają automatycznie wszystkiego wewnątrz lub w dół z powodu domyślnych ustawień przeglądarki.

Warianty szerokości i wysokości są ustawione na 100%, aby zapewnić, że przeglądarka nie zmieni ich rozmiaru w oczekiwaniu na automatyczne ustawienie marginesu lub wypełnienia, z ustawieniem wartości minimalnej i maksymalnej na wypadek, gdyby zdarzyły się jakieś dziwne, niewytłumaczalne rzeczy, chociaż ty prawdopodobnie ich nie potrzebuję.

Takie rozwiązanie oznacza również, że podobnie jak ja, kiedy zaczynałem na HTML i CSS kilka lat temu, nie będziesz musiał podać swoje pierwsze <div>A margin:-8px;, aby zmieścić się w rogu okna przeglądarki.


Zanim opublikowałem, spojrzałem na mój inny pełnoekranowy projekt CSS i stwierdziłem, że wszystko, czego tam użyłem, było tylko body{margin:0;}i nic więcej, co działało dobrze przez 2 lata, nad którymi pracowałem.

Mam nadzieję, że ta szczegółowa odpowiedź pomoże i czuję twój ból. Moim zdaniem głupotą jest to, że przeglądarki powinny ustawić niewidoczną granicę po lewej, a czasem w górnej części elementów body / html.

MineAndCraft12
źródło
Czy mógłbyś wyjaśnić, jaki jest możliwy cel elementów width: 100%body i HTML? Tak, rozumiem, że z praktycznego punktu widzenia body { margin: 0; }powinno wystarczyć w większości przypadków. Chcę tylko dokładniej zrozumieć.
john cj
21

Szybka aktualizacja

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

Lepsze rozwiązanie dzięki dzisiejszemu CSS

html, body{ 
  min-height: 100vh;
  overflow: auto;
}
Jayant Varshney
źródło
2
Czym różni się to od istniejących odpowiedzi?
cimmanon
3
Próbowałem też innych, ale dla mnie nie zadziałało. Ten działał, więc może być rozwiązaniem dla kogoś potrzebującego. @cimmanon
Jayant Varshney
Muszę powiedzieć, że ten działa dla mnie inaczej niż inne odpowiedzi z wysokim głosem. overflow: autotutaj zrób magię. Przy okazji korzystam z Chrome.
SkuraZZ
Tylko opcja (znalazłem), która pozwala przepełnić zawartość, aby zmienić wysokość.
Daniel Sharp
6

Tutaj:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}
Eddie
źródło
4

W razie potrzeby możesz także użyć JS

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}
Zioła
źródło
Ale w tym celu musisz dodać więcej rzeczy niż potrzebne, takich jak biblioteka jQuery i pisanie w JavaScript, podczas gdy można to zrobić w CSS.
Front-end Developer
3

Próbować

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
ak-SE
źródło
2
Czy mógłbyś wyjaśnić, jaki jest możliwy cel elementów width: 100%body i HTML? Tak, rozumiem, że z praktycznego punktu widzenia body { margin: 0; }powinno wystarczyć w większości przypadków. Chcę tylko dokładniej zrozumieć.
john cj
3

Proszę to sprawdzić:

* {margin: 0; padding: 0;}    
html, body { width: 100%; height: 100%;}

Lub wypróbuj nową metodę Wysokość rzutni:

html, body { width: 100vw; height: 100vh;}

Rzutnia: jeśli korzystanie z rzutni oznacza, że ​​zawartość ekranu o dowolnej wielkości osiągnie pełną wysokość ekranu.

Ayyappan K.
źródło
Dołącz wyjaśnienie swojego rozwiązania, aby inni, którzy znajdą tę odpowiedź, mogli zrozumieć. Dzięki!
Shawn
Czy mógłbyś wyjaśnić, jaki jest możliwy cel elementów width: 100%body i HTML?
john cj
powiedzmy, że mam tabelę z 50 kolumnami i 1000 wierszami o liczbach od 1000 do 9999, co się z nimi stanie, czy będą przewijać poza okno, tak jak my normalnie, czy będą mieli pasek przewijania typu przepełnienia
PirateApp
3

Jeśli nie chcesz pracować nad edycją własnego pliku CSS i samodzielnie definiować reguły wysokości, najbardziej typowe frameworki CSS rozwiązują również ten problem z elementem treści wypełniającym całą stronę, między innymi z łatwością z wieloma rozmiary rzutni.

Na przykład środowisko Tacit CSS rozwiązuje ten problem po wyjęciu z pudełka, w którym nie trzeba definiować żadnych reguł i klas CSS, a jedynie umieszcza się plik CSS w kodzie HTML.

Filipe Freire
źródło
2
html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

Działa dla wszystkich głównych przeglądarek: FF, Chrome, Opera, IE9 +. Współpracuje z obrazami tła i gradientami. Paski przewijania są dostępne w zależności od potrzeb.

Corni
źródło
2

Użyłbym tego

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }
<html>
    <body>
    </body>
</html>

Przeglądarka będzie korzystać, min-height: 100vha jeśli w jakiś sposób będzie nieco starsza, min-height: 100%nastąpi awaria.

Jest overflow: autoto konieczne, jeśli chcesz, aby treść i HTML zwiększały swoją wysokość po zmianie rozmiaru ekranu (na przykład do rozmiaru telefonu komórkowego)

medBouzid
źródło
1

wszystkie odpowiedzi są w 100% poprawne i dobrze wyjaśnione, ale zrobiłem coś dobrego i bardzo prostego, aby było responsywne.

tutaj element zajmie 100% wysokości portu widoku, ale jeśli chodzi o widok mobilny, nie wygląda dobrze specjalnie w widoku pionowym (mobilnym), więc gdy port widoku jest coraz mniejszy, element zwinie się i zachodzi na siebie. więc aby nie reagować tutaj, jest kod. mam nadzieję, że ktoś otrzyma od tego pomoc.

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

oto JSfiddle Demo.

wasimv09
źródło
0

Tutaj aktualizacja

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}
Anburaj_N
źródło
-1

O dodatkowej przestrzeni na dole: czy twoja strona jest aplikacją ASP.NET? Jeśli tak, prawdopodobnie znacznik zawiera prawie wszystko. Nie zapomnij też stylizować formularza. Dodanie overflow:hidden;do formularza może usunąć dodatkową spację na dole.

cockipup
źródło
6
Nie polecam używania przelewu: ukryty, chyba że masz naprawdę dobry powód. Dowiedz się, dlaczego wszystko się przelewa i dostosuj, aby zamiast tego się nie
przelało
-1
@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }
Wyobraź sobie Breakera
źródło
Czy mógłbyś wyjaśnić, jaki jest możliwy cel elementów width: 100%body i HTML? Tak, rozumiem, że z praktycznego punktu widzenia body { margin: 0; }powinno wystarczyć w większości przypadków. Chcę tylko dokładniej zrozumieć.
john cj
-5

CSS3 ma nową metodę.

 height:100vh

Dzięki temu ViewPort jest w 100% równy wysokości.

Twój kod powinien być

 body{
 height:100vh; 
 }
silvachathura
źródło
5
Czym różni się to od odpowiedzi, którą opublikowałem rok temu we wrześniu?
Josh Crozier
1
dlaczego podwójnie odpowiadasz?
Adriano Resende,