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

129

Я використовую радіальний градієнт як фон на своїй веб-сторінці, наприклад:

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

Це працює, але коли вміст не заповнює всю сторінку, градієнт відрізається. Як я можу змусити <body>елемент завжди заповнювати всю сторінку?

html css radial-gradients

— Ри-
джерело

2

І body { width: 100%; height: 100%; }не працює?

— Алекс

Цей біт css застосовується до тегу body так? Для мене це чудово працює в оновленому Chrome jsfiddle.net/kdjFD/embedded/result . Який браузер ви тестуєте?

— LeRoy

4

Ні, body { width: 100%; height: 100%; }не працює. Я думаю, що я теж повинен застосувати це <html>.

— Ry-

Не використовуйте старий синтаксис -webkit. Використовуйте офіційний синтаксис W3C

— Тім Нгуен

@TimNguyen: Це запитання було задано три роки тому, коли для нього не було підтримки браузера.

— Ри-

201

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

— капрагон
джерело

18

Здається, що все, що потрібно, є html { height: 100%; }насправді.

— Ry-

30

Ні для мене, html { height: 100%; }ні body { height: 100%; }для мене недостатньо (Опера включена як тест) Найкраще працювало html, body { min-height: 100%; }використання висоти замість мінімальної висоти, що залишило біле тло білого кольору без фонового кольору, застосованого, коли я розгорнув кілька розбірних знаків у середині сторінки. min-heightвиправили це.

— Стівен П

1

Чому ця проблема трапляється лише при використанні фону: лінійного градієнта, а не з простим фоном

— ASEN

@ASEN Ви коли-небудь з'ясовували, чому це так?

— мереживні

2

Якщо це все ще не працює для когось, просто перейдіть 100%на 100vh.

— Поліморфізм

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

— Ри-

1

через показ: блокова природа

— Вален

Також margin: 0;достатньо, не потрібно вказувати, для якої одиниці ви використовуєте нуль

— KameeCoding

15

Оскільки жоден з інших відповідей для мене не працював, я вирішив опублікувати це як відповідь для інших, хто шукає рішення, які також знайшли ту саму проблему. І html, і тіло, яке потрібно встановити, 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, так і тіло.

— хтруфан
джерело

4

Спробуйте використовувати оглядові (vh, vm) одиниці вимірювання на рівні тіла

html, body {margin: 0; підкладка: 0; } корпус {міні-зріст: 100vh; }

Використовуйте одиниці vh для горизонтальних полів, прокладок та меж корпусу та віднімайте їх від значення мінімальної висоти.

У мене були химерні результати з використанням vh, vm одиниць на елементах всередині тіла, особливо при повторному розмірі.

— Майк Райт
джерело

1

Я думаю, що в основному правильним способом є встановити css для цього:

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}

— Мартін Ховеке
джерело

Важливі частини цього - це те саме, що відповідь, прийнята шість років тому, вибачте.

— Ри-

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

— dinika saxena
джерело

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)

— Врокіпаль
джерело

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

— Нісс

-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
джерело

Не те, в чому питання, вибачте. Радий, що ти знайшов щось, що працює для тебе.

— Ри-