У меня есть элемент заголовка и элемент содержимого:
#header
#content
Я хочу, чтобы заголовок имел фиксированную высоту, а содержимое заполняло всю оставшуюся высоту, доступную на экране, с помощью overflow-y: scroll;.
Это возможно без Javascript?
Хитрость в этом заключается в указании 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;
}
забудь все ответы, эта строка CSS сработала у меня за 2 секунды:
height:100vh;
1vh = 1% высоты экрана браузера
Для масштабирования адаптивного макета вы можете использовать:
min-height: 100vh
[обновление ноября 2018 года] Как упомянуто в комментариях, использование минимальной высоты может избежать проблем с отзывчивым дизайном
[обновление апреля 2018 года] Как упоминалось в комментариях, еще в 2011 году, когда был задан вопрос, не все браузеры поддерживали единицы просмотра.
Другие ответы были решениями тогда - vmax все еще не поддерживается в IE, так что это может быть еще не лучшим решением для всех.
На самом деле лучший подход заключается в следующем:
html {
height:100%;
}
body {
min-height:100%;
}
Это решает все для меня, и это помогает мне контролировать мой нижний колонтитул, и он может иметь фиксированный нижний колонтитул независимо от того, прокручивается ли страница.
Техническое решение - EDITED
Исторически, "высота" - это сложная вещь, которую можно отличить, по сравнению с "шириной", самым простым. Поскольку css фокусируется на <body> для стилизации для работы. Код выше - мы дали <html> и <body> высоту. Здесь появляется волшебство - поскольку у нас есть "минимальная высота" на игровом столе, мы говорим обозревателю, что <body> превосходит <html>, потому что <body> удерживает минимальную высоту. Это, в свою очередь, позволяет <body> переопределять <html>, потому что <html> имел высоту уже ранее. Другими словами, мы обманываем браузер "bump" <html> со стола, поэтому мы можем создавать стиль самостоятельно.
Принятое решение фактически не будет работать.
Вы заметите, что содержимое div будет равно высоте его родителя, body.
Поэтому установка высоты body на 100% установит ее равной высоте окна браузера. Допустим, окно браузера имеет высоту 768px, установив для высоты содержимого div значение 100%, высота div будет, в свою очередь, равна 768px. Таким образом, в итоге заголовок div будет 150px, а div содержимого - 768px. В конце концов у вас будет контент 150px под нижней частью страницы. Для другого решения, проверьте эту ссылку.
С 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>
Вы можете использовать vh в свойстве min-height.
min-height: 100vh;
Вы можете сделать следующее, в зависимости от того, как вы используете поля...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
Для меня следующее сработало хорошо:
Я обернул заголовок и содержимое на 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 посетите ссылку .
Вы также можете установить родительский элемент display: inline. См. http://codepen.io/tommymarshall/pen/cECyH
Убедитесь, что высота html и body также установлена на 100%.
Принятый ответ не работает. И ответ с наибольшим количеством голосов не отвечает на фактический вопрос. С фиксированной высотой заголовка пикселя и заполнителем на оставшемся дисплее браузера, и прокрутите для 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, используя строки и столбцы начальной загрузки.
В этом случае я хочу, чтобы мой div для основного содержимого был жидким, чтобы вся страница занимала 100% высоты браузера.
height: 100vh;
CSS-фреймы, версия 2: пример 2, указанная ширина | 456 Berea Street
Одна важная вещь заключается в том, что, хотя это звучит просто, в вашем файле CSS будет довольно много уродливого кода, чтобы получить такой эффект. К сожалению, это единственный вариант.
Если вам не нужна поддержка 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;}
Очень просто:
#content {
max-height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}
Лучшим решением, которое я нашел до сих пор, является установка элемента нижнего колонтитула в нижней части страницы, а затем оценка разности смещения нижнего колонтитула и элемента, который нам нужно расширить. например.
<div id="contents"></div>
<div id="footer"></div>
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
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');
});
Вы пробовали что-то вроде этого?
CSS
.content {
height: 100%;
display: block;
}
HTML:
<div class=".content">
<!-- Content goes here -->
</div>