Зробіть тіло на 100% висотою браузера

Я хочу, щоб корпус мав 100% висоти браузера. Чи можу це зробити за допомогою CSS?

Я спробував налаштувати height: 100%, але це не працює.

Я хочу встановити колір фону для сторінки, щоб заповнити все вікно веб-переглядача, але якщо на сторінці мало вмісту, я отримаю потворну білу смужку внизу.

Спробуйте також встановити висоту html-елемента на 100%.

html, 
body {
    height: 100%;
}

Тіло звертається до свого батьківського (HTML) щодо того, як масштабувати динамічну властивість, тому для елемента HTML потрібно також встановити висоту.

Однак вміст тіла, ймовірно, потрібно буде динамічно змінювати. Встановлення мінімальної висоти на 100% дозволить досягти цієї мети.

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

Як альтернатива встановленню як висоти , так htmlі bodyелемента 100%, ви також можете використовувати довжини огляду у відсотках для перегляду.

5.1.2. Процентна довжина огляду: одиниці 'vw', 'vh', 'vmin', 'vmax'

Довжина перегляду в процентному співвідношенні відносно розміру початкового блоку, що містить. При зміні висоти або ширини початкового блоку вони відповідно змінюються.

У цьому випадку ви можете використовувати значення 100vh- це висота вікна перегляду.

Приклад тут

body {
  height: 100vh;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 0;
}

Це підтримується в більшості сучасних браузерів - підтримку можна знайти тут .

Якщо у вас фонове зображення, ви хочете встановити це замість цього:

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

Це гарантує, що ваш тег тіла може продовжувати зростати, коли вміст вище, ніж вікно перегляду, і що фонове зображення продовжує повторюватися / прокручувати / будь-що, коли ви починаєте прокручувати вниз.

Пам’ятайте, якщо вам доведеться підтримувати IE6, вам потрібно буде знайти спосіб закріпити height:100%тіло, як IE6, heightяк і в min-heightбудь-якому випадку.

Якщо ви хочете зберегти поля на тілі та не хочете смуги прокрутки, використовуйте наступний css:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

Налаштування body {min-height:100%} дадуть вам смуги прокрутки.

Див. Демонстрацію на веб-сайті http://jsbin.com/aCaDahEK/2/edit?html,output .

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

Після тестування різних сценаріїв я вважаю, що це найкраще рішення:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

Динамічно тим, що htmlі bodyелементи автоматично розширяться, якщо їх вміст переповнюється. Я перевірив це в останній версії Firefox, Chrome та IE 11.

Дивіться повну скрипку тут (для вас ненависні таблиці, ви завжди можете змінити її, щоб використовувати div):

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

З урахуванням цього, тут є кілька питань з відповідями, розміщеними тут .

html, body {
    height: 100%;
}

Використання вищевказаного CSS призведе до того, що html та елемент body НЕ автоматично розширюються, якщо їх вміст переповнюється, як показано тут:

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

Під час прокрутки помічаєте повторюваний фон? Це відбувається тому, що зріст елемента кузова НЕ збільшився через переповнення його дочірнього столу. Чому він не розширюється, як будь-який інший блок-елемент? Я не впевнений. Я думаю, що браузери поводяться з цим неправильно.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Встановлення на корпусі мінімальної висоти 100%, як показано вище, викликає інші проблеми. Якщо ви це зробите, ви не можете вказати, що дочірня таблиця або таблиця займає висоту відсотка, як показано тут:

https://jsfiddle.net/aq74v2v7/4/

Сподіваюся, що це комусь допоможе. Я думаю, що браузери поводяться з цим неправильно. Я б очікував, що зріст тіла автоматично регулюється зростаючим, якщо його діти переповнені. Однак, здається, це не відбувається, коли ви використовуєте 100% висоту і 100% ширину.

Що я використовую на початку буквально кожного CSS-файлу, який я використовую, це наступне:

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

Поле 0 гарантує, що веб-переглядачі не розміщують елементи HTML і BODY автоматично, щоб мати ліворуч або праворуч від них пробіл.

Прокладка 0 гарантує, що елементи HTML і BODY не автоматично відсувають все всередині них вниз або вправо через налаштування браузера.

Варіанти ширини та висоти встановлені на 100%, щоб переконатися, що веб-переглядач не змінює їх розмір, очікуючи, що насправді буде встановлено поле автоматично встановленого поля або прокладки, з мінімальним та максимальним значенням на випадок, якщо трапляються якісь дивні, незрозумілі речі, хоча ви певно, вони не потрібні.

Це рішення також означає, що, як і я, коли я вперше запустив HTML і CSS кілька років тому, вам не доведеться давати свій перший <div>a, margin:-8px;щоб він змістився в куті вікна браузера.

Перед тим, як опублікувати, я переглянув свій інший проект на повноекранному CSS і виявив, що все, що я там використовував, було просто body{margin:0;}та нічого іншого, яке добре працювало за 2 роки, над якими я працював.

Сподіваюся, що ця детальна відповідь допомагає, і я відчуваю ваш біль. На моїх очах, це нерозумно, що браузери повинні встановлювати невидиму межу ліворуч, а іноді і верхню частину елементів тіла / html.

Швидке оновлення

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

Краще рішення з сьогоднішнім CSS

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

Тут:

html,body{
    height:100%;
}

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

Ви також можете використовувати JS за потреби

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

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

Спробуйте

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

Перевірте це:

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

Або спробуйте новий метод висоти Viewport:

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

Viewport: Якщо ваш перегляд перегляду означає, що вміст екрана не буде розміром на весь екран.

Якщо ви не хочете, щоб робота над редагуванням власного CSS-файлу та самовизначення правил висоти, найтиповіші рамки CSS також вирішували цю проблему, використовуючи елемент тіла, який заповнює всю сторінку, серед інших проблем, легко розміри вікон.

Наприклад, Tacit CSS Framework вирішує цю проблему поза полем, де вам не потрібно визначати жодні правила та класи CSS, а ви просто включаєте файл CSS у свій 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%
}

Працює для всіх основних браузерів: FF, Chrome, Opera, IE9 +. Працює з фоновими зображеннями та градієнтами. Панелі прокрутки доступні як потреби в вмісті.

Я б цим скористався

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }

<html>
    <body>
    </body>
</html>

Браузер використовуватиме, min-height: 100vhі якщо браузер якось старший, то min-height: 100%це буде резервним.

overflow: autoНеобхідно , якщо ви хочете , щоб тіло і HTML , щоб розширити їх висоту при зміні розмірів екрану (для мобільного розміру, наприклад)

Тільки з 1 рядком CSS ... Ви можете це зробити.

body{ height: 100vh; }

всі відповіді на 100% вірні і добре пояснені, але я зробив щось хороше і дуже просте, щоб зробити його чуйним.

тут елемент займе 100% висоту порту перегляду, але коли мова заходить про мобільний вигляд, він не виглядає особливо добре на портретному (мобільному) режимі, тому, коли порт перегляду зменшується, елемент згортається та перекриватиметься один на одного. щоб зробити його мало чуйним тут код. сподіваюся, що хтось отримає допомогу в цьому.

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

ось демонстрація JSfiddle.

Тут оновлення

html
  {
    height:100%;
  }

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

Про додаткове місце внизу: ваша сторінка є додатком ASP.NET? Якщо так, то, мабуть, у вашій розмітці є певне майже все. Не забувайте також стилізувати форму. Додавання overflow:hidden;до форми може видалити зайве місце внизу.

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

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

У CSS3 є новий метод.

 height:100vh

Це робить ViewPort на 100% рівним висоті.

Отже, ваш Кодекс повинен бути

 body{
 height:100vh; 
 }