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

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.

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%;
}

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 .

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.

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 .

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

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.

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.

Szybka aktualizacja

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

Lepsze rozwiązanie dzięki dzisiejszemu CSS

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

Tutaj:

html,body{
    height:100%;
}

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

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)
}

Próbować

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

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.

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.

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.

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)

Tylko z 1 linią 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 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.

Tutaj aktualizacja

html
  {
    height:100%;
  }

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

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.

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

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

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; 
 }