Как HTML-элемент может заполнить 100% оставшейся высоты экрана, используя только CSS?
У меня есть элемент заголовка и элемент содержимого:
#header
#content
Я хочу, чтобы заголовок имел фиксированную высоту, а содержимое заполняло всю оставшуюся высоту, доступную на экране, с помощью overflow-y: scroll;
.
Это возможно без Javascript?
Ответы
Ответ 1
Хитрость в этом заключается в указании 100% высоты для элементов HTML и body.
Некоторые браузеры обращаются к родительским элементам (html, body), чтобы вычислить высоту.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
Ответ 2
забудь все ответы, эта строка CSS сработала у меня за 2 секунды:
height:100vh;
1vh
= 1% высоты экрана браузера
источник
Для масштабирования адаптивного макета вы можете использовать:
min-height: 100vh
[обновление ноября 2018 года]
Как упомянуто в комментариях, использование минимальной высоты может избежать проблем с отзывчивым дизайном
[обновление апреля 2018 года] Как упоминалось в комментариях, еще в 2011 году, когда был задан вопрос, не все браузеры поддерживали единицы просмотра.
Другие ответы были решениями тогда - vmax
все еще не поддерживается в IE, так что это может быть еще не лучшим решением для всех.
Ответ 3
На самом деле лучший подход заключается в следующем:
html {
height:100%;
}
body {
min-height:100%;
}
Это решает все для меня, и это помогает мне контролировать мой нижний колонтитул, и он может иметь фиксированный нижний колонтитул независимо от того, прокручивается ли страница.
Техническое решение - EDITED
Исторически, "высота" - это сложная вещь, которую можно отличить, по сравнению с "шириной", самым простым. Поскольку css фокусируется на <body>
для стилизации для работы. Код выше - мы дали <html>
и <body>
высоту. Здесь появляется волшебство - поскольку у нас есть "минимальная высота" на игровом столе, мы говорим обозревателю, что <body>
превосходит <html>
, потому что <body>
удерживает минимальную высоту. Это, в свою очередь, позволяет <body>
переопределять <html>
, потому что <html>
имел высоту уже ранее. Другими словами, мы обманываем браузер "bump" <html>
со стола, поэтому мы можем создавать стиль самостоятельно.
Ответ 4
Принятое решение фактически не будет работать.
Вы заметите, что содержимое div
будет равно высоте его родителя, body
.
Поэтому установка высоты body
на 100%
установит ее равной высоте окна браузера. Допустим, окно браузера имеет высоту 768px
, установив для высоты содержимого div
значение 100%
, высота div
будет, в свою очередь, равна 768px
. Таким образом, в итоге заголовок div будет 150px
, а div содержимого - 768px
. В конце концов у вас будет контент 150px
под нижней частью страницы. Для другого решения, проверьте эту ссылку.
Ответ 5
С HTML5 вы можете сделать это:
CSS
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}
HTML:
<header>blabablalba </header>
<section> Content </section>
Ответ 6
Вы можете использовать vh в свойстве min-height.
min-height: 100vh;
Вы можете сделать следующее, в зависимости от того, как вы используете поля...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
Ответ 7
Для меня следующее сработало хорошо:
Я обернул заголовок и содержимое на div
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
Я использовал эту ссылку, чтобы заполнить высоту flexbox. CSS выглядит так:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}
Для получения дополнительной информации о технике flexbox посетите ссылку .
Ответ 8
Вы также можете установить родительский элемент display: inline
. См. http://codepen.io/tommymarshall/pen/cECyH
Убедитесь, что высота html и body также установлена на 100%.
Ответ 9
Принятый ответ не работает. И ответ с наибольшим количеством голосов не отвечает на фактический вопрос. С фиксированной высотой заголовка пикселя и заполнителем на оставшемся дисплее браузера, и прокрутите для owerflow. Вот решение, которое действительно работает, используя абсолютное позиционирование. Я также предполагаю, что высота заголовка известна по звуку "фиксированного заголовка" в вопросе. Я использую 150px в качестве примера здесь:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
CSS: (добавление цвета фона только для визуальных эффектов)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}
Для более подробного ознакомления с тем, как это работает, с фактическим содержимым внутри #Content
, посмотрите на этот jsfiddle, используя строки и столбцы начальной загрузки.
Ответ 10
В этом случае я хочу, чтобы мой div для основного содержимого был жидким, чтобы вся страница занимала 100% высоты браузера.
height: 100vh;
Ответ 11
CSS PLaY | кросс-браузер с фиксированным заголовком/нижним колонтитулом/центрированным расположением одного столбца
CSS-фреймы, версия 2: пример 2, указанная ширина | 456 Berea Street
Одна важная вещь заключается в том, что, хотя это звучит просто, в вашем файле CSS будет довольно много уродливого кода, чтобы получить такой эффект. К сожалению, это единственный вариант.
Ответ 12
Если вам не нужна поддержка IE 9 и ниже, я бы использовал flexbox
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }
Вам также нужно получить тело, чтобы заполнить всю страницу
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
Ответ 13
Очень просто:
#content {
max-height: 100%;
}
Ответ 14
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}
Ответ 15
Лучшим решением, которое я нашел до сих пор, является установка элемента нижнего колонтитула в нижней части страницы, а затем оценка разности смещения нижнего колонтитула и элемента, который нам нужно расширить.
например.
Файл html
<div id="contents"></div>
<div id="footer"></div>
Файл css
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
Файл js (с использованием jquery)
var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');
Вам также может потребоваться обновить высоту элемента содержимого при каждом изменении размера окна, поэтому...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});
Ответ 16
Вы пробовали что-то вроде этого?
CSS
.content {
height: 100%;
display: block;
}
HTML:
<div class=".content">
<!-- Content goes here -->
</div>