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

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

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

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

11 51
html css

11 ответов:

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

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

44

немного поздно, но, может быть, это кому-то поможет.

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

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

15

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

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

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

7

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

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

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

1

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

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

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

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

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

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

0

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

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

height: calc(100% - 50px);

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

0

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

Browser: Chrome 51

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

Я думаю body был сдвинут вниз на 20px.

0

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

-8