Высота тела 100%, отображающая вертикальную полосу прокрутки

Из любопытства, учитывая приведенный ниже пример, почему наличие поля в аргументе #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

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

height: calc(100% - 50px);

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

Ответ 7

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

Ответ 8

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

Browser: Chrome 51

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

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

Ответ 9

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

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

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

Ответ 10

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

здесь мое исправление в jsfiddle.

Ответ 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;
}

Ответ 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 better to use stylesheets instead of inline-CSS. */
div
{
  width: 50%;
  height: 50%;
  
  background: red;
}

<div></div>

Ответ 13

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

Боксовой моделью по умолчанию является "content-box", который не включает отступы и поля, поэтому общая высота превышает 100% высоты области просмотра.

Таким образом, мы можем выбрать блочную модель рамки, которая включает отступы в расчете высоты.

body {
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    height: 100vh;
}

CSS включает в себя ширину отступа?

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Ответ 14

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