Czy <body> wypełnia cały ekran?

137

Używam gradientu radialnego jako tła na mojej stronie internetowej, na przykład:

background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));

Działa, ale gdy treść nie wypełnia całej strony, gradient jest odcinany. Jak mogę sprawić, by <body>element zawsze wypełniał całą stronę?

html css radial-gradients Ry-
źródło
2
I body { width: 100%; height: 100%; }nie działa?
Alex
Ten fragment CSS jest stosowany do tagu body, prawda? Działa świetnie dla mnie w aktualnym Chrome jsfiddle.net/kdjFD/embedded/result . Jaką przeglądarkę testujesz?
LeRoy
4
Nie, body { width: 100%; height: 100%; }nie działa. Chyba też muszę to zastosować <html>.
Ry-
Nie używaj starej składni -webkit-. Użyj oficjalnej składni W3C
Tim Nguyen
@TimNguyen: To pytanie zadano trzy lata temu, kiedy nie było na to wsparcia przeglądarki.
Ry-

Odpowiedzi:

208 
html, body {
    margin: 0;
    height: 100%;
}
capdragon
źródło
18
Wydaje się, że wszystko, czego potrzeba, to html { height: 100%; }faktycznie.
Ry-
30
Ani html { height: 100%; }też nie body { height: 100%; }było dla mnie wystarczające (Opera dołączona jako test). Najlepiej działało html, body { min-height: 100%; }użycie wysokości zamiast min-wysokości, które pozostawiło białe tło bez koloru tła zastosowanego podczas rozwijania niektórych zwijanych elementów div na środku mojej strony. min-heightnaprawiłem to.
Stephen P
1
Dlaczego ten problem występuje tylko podczas korzystania z tła: gradientu liniowego, a nie z prostym tłem
ASEN,
@ASEN Czy kiedykolwiek zrozumiałeś, dlaczego tak jest?
koronkowy
2
Jeśli nadal nie działa dla nikogo, po prostu zmień 100%na 100vh.
PolimorphismPrince
28

W naszej witrynie mamy strony, których treść jest statyczna, oraz strony, na których jest ładowana za pomocą AJAX. Na jednej stronie (stronie wyszukiwania) zdarzały się przypadki, gdy wyniki AJAX wypełniały więcej niż stronę, oraz przypadki, w których nie zwracały żadnych wyników. Aby obraz tła wypełniał stronę we wszystkich przypadkach, musieliśmy zastosować następujący CSS:

html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}

heightdla htmli min-heightdla body.

jwatts1980
źródło
2
Żadne z nich nie potrzebuje width: 100%;.
Ry-
2
ze względu na wyświetlacz: natura blokowa
Valen
też margin: 0;wystarczy, nie ma potrzeby określania, której jednostki używasz zero
KameeCoding
17

Ponieważ żadna z pozostałych odpowiedzi nie zadziałała dla mnie, postanowiłem opublikować to jako odpowiedź dla innych szukających rozwiązania, które również znalazły ten sam problem. Zarówno html, jak i body musiały zostać ustawione za pomocą min-heightlub gradient nie wypełniałby wysokości ciała.

Uważam, że komentarz Stephena P. zawiera poprawną odpowiedź na to pytanie.

html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

wysokość ciała wypełniającego tło

Kiedy ustawię wysokość html (lub html i body) na 100%,

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

tło nie wypełnia treści

Społeczność
źródło
12

Musiałem zastosować 100% zarówno do html, jak i body.

htrufan
źródło
4

Spróbuj użyć jednostek miary rzutni (vh, vm) na poziomie ciała

html, body {margin: 0; wyściółka: 0; } body {min-height: 100vh; }

Użyj jednostek vh dla poziomych marginesów, wypełnień i obramowań ciała i odejmij je od wartości min-height.

Miałem dziwaczne wyniki, używając jednostek vh, vm na elementach w ciele, szczególnie podczas zmiany rozmiaru.

Mike Wright
źródło
3

Myślę, że w dużej mierze poprawnym sposobem jest ustawienie css na to:

html
{
    overflow: hidden;
}

body
{
    margin: 0;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
}
Martin Wantke
źródło
Ważne części są takie same, jak odpowiedź przyjęta sześć lat temu, przepraszam.
Ry-
o mój boże, dzięki, zadziałało po godzinie poszukiwań. dzięki
Seeker
1

Wypróbowałem wszystkie powyższe rozwiązania i nie dyskredytuję żadnego z nich, ale w moim przypadku nie zadziałały.

U mnie problem był spowodowany tym, że <header>tag miał margin-top5em, a <footer>margines dolny 5em. Usunąłem je i zamiast tego włożyłem trochę padding(odpowiednio na górze i na dole). Nie jestem pewien, czy wymiana marginesu była idealnym rozwiązaniem problemu, ale chodzi o to, że jeśli pierwszy i ostatni element w twoim<body> ma jakieś marginesy, możesz zajrzeć do tego i je usunąć.

Moje htmli bodytagi miały następujące style

body {
  line-height: 1;
  min-height: 100%;
  position: relative; }

html {
  min-height: 100%;
  background-color: #3c3c3c; }
dinika saxena
źródło
1

Jeśli mają obramowanie lub wyściółkę, wówczas rozwiązanie

html, body {
    margin: 0;
    height: 100%;
}
body {
    border: solid red 5px;
    border-radius: 2em;
}
Rozwiń fragment

tworzy niedoskonałe renderowanie

niedobrze

Aby zrobić to dobrze w obecności obramowania lub wypełnienia

dobry

użyj zamiast tego

html, body {
    margin: 0;
    height: 100%;
}
body {
    box-sizing: border-box;
    border: solid red 5px;
    border-radius: 2em;
}
Rozwiń fragment

jak zauważył Martin , chociażoverflow: hidden nie jest to potrzebne.

(2018 - testowane z Chrome 69 i IE 11)

Vrokipal
źródło
Twoja odpowiedź jest istotna tylko dla Ciebie i dlatego, że dodałeś obramowanie do bodytagu. Bez tego obramowania bodywypełni dokładnie 100% widocznego obszaru, możesz to zobaczyć na przykład kolorem tła. Prawidłowa odpowiedź na to pytanie, przyjęta 7 lat temu, jest nadal aktualna.
Niss
-1

To działa dla mnie: 

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .test{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='test'>Some text</div>
</body>
</html>
GigiProve
źródło
Nie to, o co chodziło, przepraszam. Cieszę się, że znalazłeś coś, co działa dla Ciebie.
Ry-
-1

Celem jest, aby element <body> zajmował dostępną wysokość ekranu.

Jeśli nie spodziewasz się, że Twoje treści zajmą więcej niż wysokość ekranu lub planujesz utworzyć wewnętrzny przewijalny element, ustaw

body {
  height: 100vh;
}

w przeciwnym razie chcesz, aby element <body> był przewijalny, gdy jest więcej treści niż ekran może pomieścić, więc ustaw

body {
  min-height: 100vh;
}

samo to prowadzi do celu, aczkolwiek z możliwym i prawdopodobnie pożądanym udoskonaleniem.

Usunięcie marginesu <body>.

body {
  margin: 0;
}

są ku temu dwa główne powody.

  1. <body> sięga do krawędzi okna.
  2. <body> nie ma już paska przewijania od samego początku.

PS jeśli chcesz, aby tło było gradientem radialnym, którego środek znajduje się na środku ekranu, a nie w prawym dolnym rogu, jak w przykładzie, rozważ użycie czegoś takiego jak 

body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>test</title>
</head>
<body>
</body>
</html>
Rozwiń fragment

Rtzoor
źródło