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

Jako alternatywę dla ustawienia wysokości elementu html i body na 100%, można również użyć długości viewport-percentage.

5.1.2. Viewport-długości procentowe: jednostki "vw", "vh", "vmin", "Vmax"

Długość viewport-percentage jest względna do rozmiaru początkowego bloku zawierającego. Po zmianie wysokości lub szerokości początkowego bloku zawierającego są one odpowiednio skalowane.

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

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 - wsparcie można znaleźć tutaj .

Jeśli masz obraz tła, będziesz chciał ustawić to zamiast:

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

Zapewnia to, że znacznik body może nadal rosnąć, gdy zawartość jest wyższa niż widok i że obraz tła będzie powtarzał/przewijał/cokolwiek po rozpoczęciu przewijania w dół.

Pamiętaj, jeśli musisz wspierać IE6, musisz znaleźć sposób na klinowanie height:100% dla ciała, IE6 traktuje height Jak min-height w każdym razie.

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%} spowoduje wyświetlenie pasków przewijania.

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

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 to dynamiczne, ponieważ elementy html i body rozwijają się automatycznie, jeśli ich zawartość przepełni się. Testowałem to w najnowszej wersji Firefoksa, Chrome i IE 11.

Zobacz pełną wersję tutaj (dla was hejterzy stołowi, zawsze możecie ją zmienić na div):

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

Z tym, że powiedziane, istnieją kilka problemów z odpowiedziami zamieszczonymi tutaj .

html, body {
    height: 100%;
}

Użycie powyższego CSS spowoduje, że html i element body nie będą się automatycznie rozszerzać, jeśli ich zawartość przepełni się, jak pokazano tutaj:

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

Podczas przewijania zauważysz powtarzające się tło? Dzieje się tak, ponieważ Wysokość elementu ciała nie wzrosła z powodu przepełnienia stołu dziecka. Dlaczego nie rozszerza się jak każdy inny element blokowy? Nie jestem pewien. I pomyśl, że przeglądarki obsługują to nieprawidłowo.

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 potomne lub tabela zajmują procentową wysokość, jak pokazano tutaj:

Https://jsfiddle.net/aq74v2v7/4/

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

Szybka aktualizacja

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

Lepsze rozwiązanie z dzisiejszym CSS

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

To, czego używam na początku dosłownie każdego pliku CSS, którego używam, jest następujące:

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 lewej lub prawej stronie.

Wyściółka 0 zapewnia, że elementy HTML i BODY nie przesuwają automatycznie wszystkiego wewnątrz nich w dół lub w prawo z powodu domyślnych ustawień przeglądarki.

Warianty szerokości i wysokości są ustawione na 100%, aby zapewnić, że przeglądarka nie zmienia ich rozmiaru w oczekiwaniu na automatyczne ustawianie marginesu lub wypełnienia, z ustawieniem min i max na wypadek, gdyby wydarzyły się jakieś dziwne, niewytłumaczalne rzeczy, chociaż prawdopodobnie ich nie potrzebujesz.

To rozwiązanie oznacza również, że tak jak to zrobiłem, gdy kilka lat temu zaczynałem pracę nad HTML i CSS, nie będziesz musiał podawać swojego pierwszego <div> A margin:-8px;, aby zmieścił się w rogu okna przeglądarki.

Zanim opublikowałem, zajrzałem do mojego innego pełnoekranowego projektu CSS i znalazłem że wszystko, czego tam używałem, to tylko body{margin:0;} i nic więcej, co działało dobrze przez 2 lata, nad którym pracowałem.

Tutaj:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

Możesz również użyć JS w razie potrzeby

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

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

Try

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

Proszę sprawdzić to:

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

Lub spróbuj nowej metody viewport height:

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

Viewport: Jeśli używasz viewport oznacza zawartość ekranu o dowolnym rozmiarze, która pojawi się na pełnej wysokości ekranu.

Jeśli nie chcesz edytować własnego pliku CSS i samodzielnie definiować reguł wysokości, najbardziej typowe frameworki CSS również rozwiązują ten problem z elementem body wypełniającym całą stronę, między innymi z łatwością dzięki wielu rozmiarom portów widoków.

Na przykład, Tacit CSS framework rozwiązuje ten problem po wyjęciu z pudełka, gdzie nie musisz definiować żadnych reguł i klas CSS, a po prostu dołączasz plik CSS do swojego HTML.

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 używać min-height: 100vh i jeśli w jakiś sposób przeglądarka jest trochę starsza min-height: 100% będzie alternatywą.

overflow: auto jest konieczne, jeśli chcesz, aby ciało i html zwiększyły swoją wysokość po zmianie rozmiaru ekranu (na przykład do rozmiaru mobilnego)

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+. Działa z obrazami tła i gradientami. Paski przewijania są dostępne w zależności od potrzeb.

Tylko z 1 linijką CSS ... możesz to zrobić.

body{ height: 100vh; }

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 to dobrze, szczególnie w widoku portowym (mobilnym ), więc gdy port widoku jest coraz mniejszy, element zwija się i nakłada na siebie. więc aby było mało responsywne tutaj jest kod. mam nadzieję, że ktoś z tego skorzysta.

<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.

Jest tu kilka dobrych odpowiedzi, ale także pewne nieporozumienia. Obsługuję następujące ustawienia dla nowoczesnych przeglądarek podczas stylizacji dla wymiarów na stronach internetowych:

html {
    height: 100%; /* fallback for IE and older browsers */
    height: 100vh;
}

body {
    height: auto; /* required to allow content to expand vertically without overflow */
    width: auto;
    min-height: 100%; /* fallback for IE and older browsers */
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

Na początek nowe jednostki viewport ("vh") są zbędne i nie są konieczne, o ile ustawisz html na wysokość 100%. Powodem jest to, że body wywodzi swoje wartości od rodzica html. Możesz nadal używać jednostek "vh" w body, aby ominąć rodzica i uzyskać jego wymiary właściwości bezpośrednio z viewport. Ale jego opcjonalne, jeśli html ma 100% Wysokość.

Uwaga ustawiłem body na height:auto. nie chcesz ustawić body height i width do 100%, lub określone wartości, ponieważ ogranicza zawartość do wymiarów viewportu i nastąpi przepełnienie. height:auto jest twoim najlepszym przyjacielem w CSS! Używanie właściwości overflow:auto nie jest konieczne, jeśli ustawisz height:auto na body. To mówi stronie, aby zawartość rozszerzała wysokość do dowolnego wymiaru, nawet poza wysokością widoku, jeśli musi. Nie wyrwie się z body wymiarów. I umożliwia przewijanie w razie potrzeby. auto pozwala również na tworzenie marginesów i stron wsparcia, które wypełniają Widok za pomocą min-height. Uważam, że {[10] } jest domyślnym ciałem w większości arkuszy stylów przeglądarki UA.

Dodanie min-height:100% daje domyślną wysokość, którą chcesz mieć body, a następnie pozwala wymiarom strony wypełnić Widok bez wyłamywania się zawartości z ciała. Działa tylko dlatego, że html ma opracowano na podstawie materiału źródłowego.

Dwa elementy krytyczne nie są jednostkami, jak % lub vh, ale upewniając się, że element główny lub html jest ustawiony na 100% wysokości widoku. Po drugie, ważne jest, aby ciało miało min-height:100% lub min-height:100vh, więc zaczyna wypełniać wysokość widoku, cokolwiek to może być. Nic poza tym nie jest potrzebne. Zauważ dodałem właściwości "fallback" dla minimalnej wysokości, ponieważ wiele przeglądarek po 2010 roku nie obsługuje jednostek "vh". Its fun to pretend każdy w świecie internetowym korzysta z najnowszych i najlepszych, ale rzeczywistość jest taka, że wiele starszych przeglądarek jest nadal obecnych w dużych sieciach korporacyjnych nadal używa przestarzałych przeglądarek, które nie rozumieją tych nowych jednostek.

WYSOKOŚĆ STYLIZACJI DLA STARSZYCH PRZEGLĄDAREK

Jedną z rzeczy, o których zapominamy, jest to, że wiele bardzo starych przeglądarek nie wie, jak poprawnie wypełnić wysokość viewportu. Niestety, te starsze przeglądarki po prostu musiały mieć height:100% zarówno na elemencie html, jak i body. Jeśli nie zrób to, kolory tła przeglądarki i inne dziwne wizualizacje będą przepływać pod treścią, która nie wypełnia widoku. Rozwiązaliśmy to, dostarczając te 100% wartości tylko starszym agentom użytkowników. Jeśli testujesz na starszej przeglądarce, pamiętaj o tym.

html  {
    height:100%;
}

body {
    height:100%;
    width:auto;
    margin:0;
    padding:0;
}

Tutaj Aktualizacja

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

Stylizuję kontener div-Zwykle jedyne dziecko ciała za pomocą następującego css

.body-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

O dodatkowej przestrzeni na dole: czy Twoja strona jest ASP.NET podanie? Jeśli tak, to prawdopodobnie prawie wszystko jest owijane w znacznikach. Nie zapomnij również stylizować formy. Dodanie overflow:hidden; do formularza może usunąć dodatkowe miejsce na dole.

@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

CSS3 ma nową metodę.

 height:100vh

Więc Twój kod powinien być

 body{
 height:100vh; 
 }