Как задать высоту body равной 100% высоты браузера?

Question

Я хочу задать элементу body высоту в 100% от высоты браузера. Можно ли сделать это с помощью CSS?

Я пробовал установить height: 100%, но это не сработало.

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

Answer 1

Попробуйте установить высоту элемента html на 100% тоже:

html, 
body {
    height: 100%;
}

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

Однако содержимое body, скорее всего, будет меняться динамически. В этом случае установка min-height на 100% поможет достичь нужного результата.

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

Answer 2

Если у вас есть фоновое изображение, то стоит использовать следующий код:

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

Это обеспечит возможность для тега <body> продолжать увеличиваться в размерах, когда содержимое превышает высоту окна просмотра, а фон будет продолжать повторяться/прокручиваться и т.д. при прокрутке вниз.

Имейте в виду, что если вам нужно поддерживать IE6, вам потребуется каким-то образом "втиснуть" height: 100% для тега <body>, так как IE6 обрабатывает height как min-height.

Answer 3

Если вы хотите оставить отступы на теле документа и избежать появления полос прокрутки, используйте следующий 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.

Answer 4

После тестирования различных сценариев, я пришел к выводу, что это лучшее решение:

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

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

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

Это решение динамично, так как элементы html и body будут автоматически расширяться, если их содержимое переполнится. Я протестировал это в последних версиях Firefox, Chrome и IE 11.

Полную версию примера можно посмотреть здесь (для тех, кто не любит таблицы, вы всегда можете заменить их на div):

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

С учетом сказанного, существуют несколько проблем с ответами, опубликованными здесь.

html, body {
    height: 100%;
}

Использование вышеуказанного CSS приведет к тому, что элементы html и body НЕ будут автоматически расширяться при переполнении содержимого, как показано здесь:

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

Обратите внимание на повторяющийся фон при прокрутке? Это происходит потому, что высота элемента body НЕ увеличивается из-за переполнения его дочерней таблицей. Почему он не расширяется как любой другой блочный элемент? Я не уверен. Думаю, браузеры обрабатывают это некорректно.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

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

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

Надеюсь, это поможет кому-то. Я считаю, что браузеры обрабатывают это некорректно. Я ожидал бы, что высота body будет автоматически регулироваться и увеличиваться, если её дочерние элементы переполняют. Однако это, похоже, не происходит, когда используются 100% высота и ширина.

Answer 5

Ваш CSS код устанавливает стили для элементов html и body. Давайте разберем его по частям:

html, body {
  height: 100%; /* Устанавливает высоту элементов html и body на 100% */
  margin: 0;    /* Убирает стандартные отступы (margin) у body */
  padding: 0;   /* Убирает стандартные поля (padding) у body */
}

height: 100%; — это правило устанавливает высоту для элементов html и body, равную 100% от высоты родительского элемента. Для html, это будет высота окна браузера.
margin: 0; — эта настройка убирает любые отступы, которые браузер может добавлять по умолчанию к элементу body. Это важно для точной настройки макета.
padding: 0; — аналогично предыдущему правилу, это удаляет любые внутренние отступы у элемента body.

Таким образом, данный код часто используется как основа для создания страниц, устраняя стандартные отступы и обеспечивая полное использование высоты экрана. Если у вас остались вопросы или нужно больше информации, не стесняйтесь спрашивать!

Как задать высоту body равной 100% высоты браузера?

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных