Заставить <body> заполнить весь экран?

129

Я использую радиальный градиент в качестве фона на своей веб-странице, например:

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

Это работает, но когда контент не заполняет всю страницу, градиент обрезается. Как сделать так, чтобы <body>элемент всегда заполнял всю страницу?

html css radial-gradients

— Ry-
источник

2

И body { width: 100%; height: 100%; }не работает?

— Alex

Этот бит CSS применяется к тегу body, верно? Он отлично работает для меня в обновленном Chrome jsfiddle.net/kdjFD/embedded/result . Какой браузер вы тестируете?

— LeRoy

4

Нет, body { width: 100%; height: 100%; }не работает. Думаю, я тоже должен это применить <html>.

— Ry-

Не используйте старый синтаксис -webkit-. Используйте официальный синтаксис W3C

— Тим Нгуен

@TimNguyen: Этот вопрос был задан три года назад, когда для этого не было поддержки браузером.

— Ry-

201

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

— capdragon
источник

18

Кажется, что все на html { height: 100%; }самом деле.

— Ry-

30

Для меня html { height: 100%; }ни body { height: 100%; }того, ни другого было недостаточно (Opera включена в качестве теста). Лучше всего сработало html, body { min-height: 100%; }использование высоты вместо минимальной высоты, поэтому мой фон оставался белым без цвета фона, примененного, когда я разворачивал некоторые складные блоки в середине моей страницы. min-heightисправил это.

— Stephen P

1

Почему эта проблема возникает только при использовании фона: линейный градиент, а не с простым фоном

— ASEN

@ASEN Вы когда-нибудь понимали, почему это так?

— lacy

2

Если это все еще не работает ни у кого, просто смените 100%на 100vh.

— PolymorphismPrince

27

На нашем сайте есть страницы, где контент статичен, и страницы, где он загружается с помощью AJAX. На одной странице (странице поиска) были случаи, когда результаты AJAX более чем заполняли страницу, и случаи, когда результаты не возвращались. Чтобы фоновое изображение заполняло страницу во всех случаях, нам пришлось применить следующий CSS:

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

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

heightдля htmlи min-heightдля body.

— jwatts1980
источник

1

Ни то, ни другое не нужно width: 100%;.

— Ry-

1

из-за отображения: блочная природа

— Вален

также margin: 0;достаточно, не нужно указывать, какие единицы вы используете ноль

— KameeCoding

15

Поскольку ни один из других ответов у меня не помог, я решил опубликовать это как ответ для других, ищущих решение, которые также нашли ту же проблему. Необходимо установить и html, и body, min-heightиначе градиент не заполнит высоту тела.

Я нашел комментарий Стивена П., чтобы дать правильный ответ на это.

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

фон заливка высота тела

Когда у меня высота html (или html и body) установлена на 100%,

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

фон не заполняет тело

— Сообщество
источник

12

Пришлось применить 100% и к html, и к телу.

— htrufan
источник

4

Попробуйте использовать единицы измерения viewport (vh, vm) на уровне тела

html, body {margin: 0; отступ: 0; } body {мин-высота: 100vh; }

Используйте единицы измерения vh для горизонтальных полей, отступов и границ тела и вычтите их из значения min-height.

У меня были странные результаты с использованием модулей vh, vm для элементов внутри тела, особенно при изменении размера.

— Майк Райт
источник

2

Я думаю, что наиболее правильный способ - установить css на это:

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}

— Мартин Вантке
источник

Важные части этого совпадают с ответом, принятым шесть лет назад, извините.

— Ry-

Боже мой, спасибо, все заработало после часа поиска. спасибо

— искатель

1

Я пробовал все вышеперечисленные решения и не дискредитирую ни одно из них, но в моем случае они не сработали.

Для меня проблема была вызвана тем, что у <header>тега было margin-top5em, а у <footer>нижнего поля 5em. Я удалил их и вместо них поставил padding(сверху и снизу соответственно). Я не уверен, что замена поля была идеальным решением проблемы, но дело в том, что если первый и последний элементы в вашем<body> есть какие-то поля, вы можете изучить его и удалить их.

Мои htmlи bodyтеги имели следующие стили

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

html {
  min-height: 100%;
  background-color: #3c3c3c; }

— диника саксена
источник

1

Если у вас есть граница или отступы, то решение

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

Развернуть фрагмент

производит несовершенный рендеринг

Чтобы сделать это правильно при наличии границы или отступа

использовать вместо

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

Развернуть фрагмент

как указал Мартин , хотяoverflow: hidden это и не нужно.

(2018 - протестировано с Chrome 69 и IE 11)

— Vrokipal
источник

Ваш ответ актуален только для вас и потому, что вы добавили рамку к bodyтегу. Без этой границы bodyон заполнит ровно 100% области просмотра, вы можете увидеть это, например, с помощью цвета фона. Правильный ответ на этот вопрос, принятый 7 лет назад, остается в силе.

— Niss

-1

Это работает для меня:

<!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
источник

Не в чем был вопрос, извините. Рад, что вы нашли то, что работает для вас.

— Ry-