Я хочу, чтобы у тела было 100% высоты браузера. Могу ли я сделать это с помощью CSS?
Я попытался установить height: 100%, но он не работает.
Я хочу установить цвет фона для страницы, чтобы заполнить все окно браузера, но если на странице мало контента, я получаю уродливую белую панель внизу.
Попробуйте также установить высоту HTML-элемента на 100%.
html,
body {
height: 100%;
}
Тело ищет своего родителя (HTML) для масштабирования динамического свойства, поэтому для HTML-элемента также должна быть установлена его высота.
Однако содержание тела, вероятно, нужно будет динамически менять. Установка минимальной высоты на 100% позволит достичь этой цели.
html {
height: 100%;
}
body {
min-height: 100%;
}
В качестве альтернативы для установки высоты элементов html и body до 100% вы также можете использовать длины в разрезе в процентах.
5.1.2. Длины в процентах по видовому экрану: vw, vh, vmin, vmax units
Длины в процентах в окне просмотра относятся к размеру исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они соответственно масштабируются.
В этом случае вы можете использовать значение 100vh - которое является высотой области просмотра.
body {
height: 100vh;
}
body {
min-height: 100vh;
}
Это поддерживается в большинстве современных браузеров. поддержка можно найти здесь.
Если у вас есть фоновое изображение, вам нужно будет установить это вместо:
html{
height: 100%;
}
body {
min-height: 100%;
}
Это гарантирует, что тег вашего тела может продолжать расти, когда контент выше, чем область просмотра, и что фоновое изображение продолжает повторяться/прокручиваться/что угодно, когда вы начинаете прокрутку вниз.
Помните, что если вам нужно поддерживать IE6, вам нужно найти способ клина в height:100% для тела, IE6 рассматривает height как min-height в любом случае.
Если вы хотите сохранить поля на теле и не хотите полосы прокрутки, используйте следующий 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.
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
То, что я использую в начале буквально каждого используемого файла CSS, выглядит следующим образом:
html, body{
margin: 0;
padding: 0;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
}
Поля 0 гарантируют, что элементы HTML и BODY не будут автоматически размещены браузером, чтобы иметь некоторое пространство слева или справа от них.
Отметка 0 гарантирует, что элементы HTML и BODY автоматически не будут выталкивать все из них вниз или вправо из-за настроек браузера.
Варианты ширины и высоты установлены на 100%, чтобы гарантировать, что браузер не будет изменять их размер в ожидании фактического наличия заданного поля или заполнения, с минимальным и максимальным набором на случай, если произойдет какое-то странное, необъяснимое дело, хотя вы, вероятно, не нуждаетесь в них.
Это решение также означает, что, как и в случае, когда я впервые начал работать с HTML и CSS несколько лет назад, вам не придется указывать свой первый <div> a margin:-8px;, чтобы он соответствовал углу браузера окно.
Прежде чем я разместил сообщение, я посмотрел на свой другой проект в полноэкранном CSS и обнаружил, что все, что я использовал, было просто body{margin:0;} и ничего больше, что отлично работало в течение двух лет, над которыми я работал.
Надеюсь, что этот подробный ответ поможет, и я чувствую вашу боль. На мой взгляд, глупо, что браузеры должны устанавливать невидимую границу слева, а иногда и верхнюю часть элементов body/html.
После тестирования различных сценариев я считаю, что это лучшее решение:
html {
width:100%;
height: 100%;
display: table;
}
body {
width:100%;
display:table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
Он динамичен тем, что элемент html и body автоматически расширятся, если их содержимое переполняется. Я тестировал это в последней версии Firefox, Chrome и IE 11.
Посмотрите здесь полную скрипку (для вас там нет поклонников стола, вы всегда можете изменить ее, чтобы использовать div):
https://jsfiddle.net/71yp4rh1/9/
С учетом сказанного существует несколько вопросов с ответами, размещенными здесь.
html, body {
height: 100%;
}
Использование вышеуказанного CSS приведет к тому, что html и элемент body НЕ будут автоматически расширяться, если их содержимое переполняется, как показано здесь:
https://jsfiddle.net/9vyy620m/4/
Как вы прокручиваете, обратите внимание на повторяющийся фон? Это происходит потому, что высота элемента тела НЕ увеличилась из-за переполнения его дочерней таблицы. Почему он не расширяется, как любой другой элемент блока? Я не уверен. Я думаю, что браузеры обрабатывают это неправильно.
html {
height: 100%;
}
body {
min-height: 100%;
}
Установка минимальной высоты 100% на тело, как показано выше, вызывает другие проблемы. Если вы это сделаете, вы не можете указать, что дочерний div или таблица занимает процентную высоту, как показано ниже:
https://jsfiddle.net/aq74v2v7/4/
Надеюсь, это поможет кому-то. Я думаю, что браузеры обрабатывают это неправильно. Я ожидал бы, что рост тела будет автоматически регулироваться, увеличиваясь, если его дети переполняются. Однако это не происходит, если вы используете 100% высоту и 100% ширину.
Быстрое обновление
html, body{
min-height:100%;
overflow:auto;
}
Лучшее решение с сегодняшним CSS
html, body{
min-height: 100vh;
overflow: auto;
}
Здесь:
html,body{
height:100%;
}
body{
margin:0;
padding:0
background:blue;
}
Пожалуйста, проверьте это:
* {margin: 0; padding: 0;}
html, body { width: 100%; height: 100%;}
Или попробуйте новый метод Высота видового экрана:
html, body { width: 100vw; height: 100vh;}
Viewport: Если ваш используемый видовой экран означает, что содержимое экрана любого размера будет иметь полную высоту экрана.
Вы также можете использовать JS
var winHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
var pageHeight = $('body').height();
if (pageHeight < winHeight) {
$('.main-content,').css('min-height',winHeight)
}
Try
<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
Только с 1 строкой CSS... Вы можете сделать это.
body{ height: 100vh; }
Если вы не хотите работать с редактированием собственного CSS файла и сами определяете правила высоты, наиболее типичные рамки CSS также решают эту проблему, если элемент тела заполняет всю страницу, среди прочих проблем, в легкость с несколькими размерами видовых экранов.
Например, Tacit CSS framework решает эту проблему из коробки, где вам не нужно определять какие-либо правила CSS и классы, и вы просто включаете CSS файл в свой HTML.
Попробуйте добавить:
body {
height: 100vh;
}
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
html body {
min-height: 100%
}
Работает для всех основных браузеров: FF, Chrome, Opera, IE9+. Работает с фоновыми изображениями и градиентами. Полосы прокрутки доступны в виде содержимого.
Я бы использовал это
html, body{
background: #E73;
min-height: 100%;
min-height: 100vh;
overflow: auto; // <- this is needed when you resize the screen
}<html>
<body>
</body>
</html>все ответы на 100% правильны и хорошо объяснены, но я сделал что-то хорошее и очень простое, чтобы сделать его отзывчивым.
здесь элемент будет занимать 100% высоты порта просмотра, но когда дело доходит до мобильного просмотра, оно не выглядит хорошо особенно на портретном (мобильном), поэтому, когда порт просмотра становится меньше, элемент будет рушиться и перекрываться на каждом Другие. поэтому, чтобы сделать его немного отзывчивым, это код. надеюсь кто-то получит помощь от этого.
<style>
.img_wrap{
width:100%;
background: #777;
}
.img_wrap img{
display: block;
width: 100px;
height: 100px;
padding: 50px 0px;
margin: 0 auto;
}
.img_wrap img:nth-child(2){
padding-top: 0;
}
</style>
<div class="img_wrap">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
<img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>
<script>
var windowHeight = $(window).height();
var elementHeight = $('.img_wrap').height();
if( elementHeight > windowHeight ){
$('.img_wrap').css({height:elementHeight});
}else{
$('.img_wrap').css({height:windowHeight});
}
</script>
здесь JSfiddle Demo.
Здесь обновление
html
{
height:100%;
}
body{
min-height: 100%;
position:absolute;
margin:0;
padding:0;
}
О дополнительном пространстве внизу: ваша страница - приложение ASP.NET? Если это так, возможно, в вашей разметке есть почти все. Не забудьте также форматировать форму. Добавление overflow:hidden; в форму может удалить дополнительное пространство внизу.
@media all {
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
} }
CSS3 имеет новый метод.
height:100vh
Он делает ViewPort на 100% равным высоте.
Итак, ваш код должен быть
body{
height:100vh;
}