Высота тела 100% с отображением вертикальной полосы прокрутки

Question 1

Из любопытства, учитывая приведенный ниже пример, почему наличие поля в div #container вызывает появление вертикальной полосы прокрутки в браузере? Контейнер намного меньше по высоте, чем высота корпуса, установленная на 100%.

Я установил отступы и поля равными 0 для всех элементов, кроме #container. Обратите внимание, что я намеренно опустил абсолютное позиционирование в div #container. В этом случае как браузер вычисляет высоту тела и как на нее влияет маржа?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
  padding:10px;
  margin:50px;
  border:1px solid black;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>
  <div id='container'>
  </div>
</body>
</html>

Пример также на JSFiddle

Question 2

Если вы рисуете фон htmlи body(придавая каждому свой цвет) , вы быстро заметите, что bodyон смещается вниз вместе с #container, а #containerсам не смещается от вершины bodyвообще. Это побочный эффект коллапса маржи , о котором я подробно рассказываю здесь (хотя этот ответ описывает несколько иную настройку).

Это поведение вызывает появление полосы прокрутки, поскольку вы заявили, bodyчто ее высота составляет 100% html. Обратите внимание, что фактическая высота bodyне изменяется, так как поля никогда не включаются в вычисления высоты.

Question 3

Основываясь на ответе @ BoltClock ♦, я исправил это, обнулив маржу ...
так что

html,body, #st-full-pg {
   height: 100%;
   margin: 0;
}

работает, когда id "st-full-pg" назначается div панели (который дополнительно содержит заголовок панели и тело панели)

Question 4

Немного поздно, но, возможно, это кому-то поможет.

Добавление float: left;в #containerубирает полосу прокрутки, как говорит W3C:

• Поля между плавающим блоком и любым другим блоком не сжимаются (даже между плавающим блоком и его дочерними элементами в потоке).

Question 5

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

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

Question 6

добавление float:left;- это хорошо, но будет мешать центральному горизонтальному позиционированию, используяmargin:auto;

если вы знаете, насколько велика ваша маржа, вы можете учесть это в своем проценте роста с помощью calc:

height: calc(100% - 50px);

поддержка браузером хорошая, но только IE11 + https://caniuse.com/#feat=calc

Question 7

html, body {
    height: 100%;
    overflow: hidden;
}

Если вы хотите убрать прокрутку текста, добавьте следующий стиль:

body {
    height: 100%;
    overflow: hidden;
}

Question 8

Я нашел решение: добавить отступ: 1px 0; to body предотвращает появление вертикальных полос прокрутки

Question 9

Я видел, как эта проблема исправлена раньше, когда вы помещали все содержимое bodyв div под названием wrap. Должен быть установлен стиль обтекания position: relative; min-height: 100%;. Чтобы разместить #containerdiv на 50 пикселей сверху и слева, поместите внутри обертки div с отступом 50 пикселей. Поля не будут работать с wrap и только что созданным div, но они будут работать внутри #containerи со всем, что внутри него.

вот мое исправление на jsfiddle .

Question 10

Вдохновленный @BoltClock, я попробовал это, и это сработало даже при уменьшении и уменьшении масштаба.

Browser: Chrome 51

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
  position: relative;
  top: -20px;
}

Я думаю, он bodyбыл сдвинут на 20 пикселей вниз.

Question 11

/*removes default margin & padding*/
html, body{
    padding: 0px !important;
    margin: 0px !important;
}

/*sets body height to max; and allows scrollbar as page content grows*/
body{
    min-height: 100vh;
}

Question 12

Для тех, кто пришел сюда, чтобы получить более легкий для понимания ответ, который даже включает образцы кода, этот ответ (скопирован отсюда ) для вас.

Никакого JavaScript или определенных значений пикселей (таких как 100px) не требуется, только чистый CSS и проценты.

Если ваш div просто сидит там сам по себе, это height: 50%будет означать 50% высоты тела. Обычно высота тела равна нулю без какого-либо видимого содержимого, поэтому 50% от этого просто нулевая высота.

Это решение (основанное на этом ) (раскомментируйте backgroundстроки, чтобы получить визуализацию заполнения):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html
{
  height: 100%;
  
  /* background: green; */
}

body
{
  /*
    100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
    This prevents an unnecessary vertical scrollbar from appearing.
  */
  height: calc(100% - 1em);
  
  /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

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

Выше было написано так, чтобы все равно оставался обычный отступ. Вы можете установить размеры красного divдо 100%и по- прежнему видеть отступы с каждой стороны / конца. Если вам не нужен этот отступ, используйте его (хотя он выглядит не очень красиво, я рекомендую вам придерживаться первого примера):

/* Makes <html> take up the full page without requiring content to stretch it to that height. */

html, body
{
  height: 100%;
}

/* You can uncomment it but you wouldn't be able to see it anyway. */

/*
html
{
  background: green;
}
*/

body
{
  margin: 0;
  
 /* background: blue; */
}

/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

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

Question 13

Меня устраивает:

html,
body {
    height: 100%;
    height: -webkit-fill-available; // Chrome
}

// Firefox
@-moz-document url-prefix() {
    body {
        box-sizing: border-box; 
        margin: 0;
        padding: 1px;
    }
}

Question 14

Добавить overflow: hidden;в html и body.

html, body {
  height: 100%;
  overflow: hidden;
}

Question 15

Я нашел быстрое решение: попробуйте установить высоту 99,99% вместо 100%.