Высота тела 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%.

Answer 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

Answer 2

См. Также stackoverflow.com/questions/34357434/…

Мэтт Браун

Answer 3

65

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

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

BoltClock
источник

Означает ли это, что высота элементов на странице вычисляется, начиная с окна, затем тела, а затем элементов внутри / или над телом? Все ли проценты конвертируются в значения px, pt или em?

TMB

5

@TMB: 100% высота htmlделает его 100% области просмотра (область просмотра браузера), а высота 100% bodyделает его 100% его родительского элемента, то есть html. Любые последующие проценты всегда являются процентами предка (ов) элемента. Если вы не установили 100% высоты на htmlили bodyтогда они ведут себя , как и любой другой элемент блока. Подробнее см. W3.org/TR/CSS21/syndata.html#percentage-units . В конечном итоге все% s и ems должны быть преобразованы в какое-то абсолютное значение во время рендеринга, чтобы браузер точно знал, насколько велик или мал измерять и отображать объекты на экране.

BoltClock

1

@neodymium: Верно. Оба htmlи bodyведут себя как любой другой элемент блочного уровня.

BoltClock

8

Итак, как это исправить? По плавающему контейнеру , как говорит Мишель ?

Дэн Даскалеску

1

@ Даниэль Альбушат: Для меня большая честь!

BoltClock

Answer 4

Означает ли это, что высота элементов на странице вычисляется, начиная с окна, затем тела, а затем элементов внутри / или над телом? Все ли проценты конвертируются в значения px, pt или em?

TMB

Answer 5

5

@TMB: 100% высота htmlделает его 100% области просмотра (область просмотра браузера), а высота 100% bodyделает его 100% его родительского элемента, то есть html. Любые последующие проценты всегда являются процентами предка (ов) элемента. Если вы не установили 100% высоты на htmlили bodyтогда они ведут себя , как и любой другой элемент блока. Подробнее см. W3.org/TR/CSS21/syndata.html#percentage-units . В конечном итоге все% s и ems должны быть преобразованы в какое-то абсолютное значение во время рендеринга, чтобы браузер точно знал, насколько велик или мал измерять и отображать объекты на экране.

BoltClock

Answer 6

1

@neodymium: Верно. Оба htmlи bodyведут себя как любой другой элемент блочного уровня.

BoltClock

Answer 7

8

Итак, как это исправить? По плавающему контейнеру , как говорит Мишель ?

Дэн Даскалеску

Answer 8

1

@ Даниэль Альбушат: Для меня большая честь!

BoltClock

Answer 9

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

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

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

Answer 10

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

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

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

Answer 11

3

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

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

fjkjava
источник

2

если у вас есть нижний колонтитул, он его удаляет

Александр

Answer 12

2

если у вас есть нижний колонтитул, он его удаляет

Александр

Answer 13

3

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

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

height: calc(100% - 50px);

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

ben.tiberius.avery
источник

Почему 50 пикселей? Магическое число.

Иван Рубинсон

«если вы знаете, насколько велика ваша маржа». Я считаю, что это то, что OP имеет в виду с 50px

Клей

Answer 14

Почему 50 пикселей? Магическое число.

Иван Рубинсон

Answer 15

«если вы знаете, насколько велика ваша маржа». Я считаю, что это то, что OP имеет в виду с 50px

Клей

Answer 16

1

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

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

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

лалит бхакуни
источник

Это устранило мою проблему, когда у меня было 2 вертикальные полосы прокрутки. Установка html overflow: hiddenи оставление тела в покое исправили это. И у моего тела, и у HTML есть height: 100%.

Karai17

Answer 17

Это устранило мою проблему, когда у меня было 2 вертикальные полосы прокрутки. Установка html overflow: hiddenи оставление тела в покое исправили это. И у моего тела, и у HTML есть height: 100%.

Karai17

Answer 18

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

Answer 19

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

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

Answer 20

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

Browser: Chrome 51

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

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

Answer 21

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

Answer 22

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

Никакого 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>

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

Answer 23

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

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

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

Answer 24

-2

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

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

NexusRex
источник

42

это решение полностью удаляет полосу прокрутки. даже на тех страницах, где нужен свиток

Вил

Answer 25

42

это решение полностью удаляет полосу прокрутки. даже на тех страницах, где нужен свиток

Вил

Answer 26

-9

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

user1254226
источник

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

Терра Эшли

Answer 27

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

Терра Эшли

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

Ответы: