Как заставить блок DIV расширяться до нижней части страницы, даже если у него нет содержимого?
В разметке, показанной ниже, я пытаюсь растянуть div содержимого до самого низа страницы, но он растягивается только в том случае, если есть контент для отображения. Причина, по которой я хочу это сделать, заключается в том, что вертикальная граница по-прежнему отображается внизу страницы, даже если нет содержимого для отображения.
Вот мой HTML:
<body>
<form id = "form1">
<div id = "header">
<a title = "Home" href = "index.html" />
</div>
<div id = "menuwrapper">
<div id = "menu">
</div>
</div>
<div id = "content">
</div>
И мой CSS:
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
Ответы 17
вы можете взломать его с помощью объявления мин-высота
<div style = "min-height: 100%">stuff</div>
Также вам может понравиться это: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
Это не совсем то, о чем вы просили, но это также может удовлетворить ваши потребности.
Попробуйте поиграть со следующим правилом css:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Измените высоту, чтобы она соответствовала вашей странице. Высота упоминается дважды для кроссбраузерной совместимости.
это работает, но я обнаружил, что если я увеличиваю минимальную высоту до более 600 пикселей, создается прокрутка. Вы хоть представляете, почему это происходит?
@SiddharthPatel Потому что div #content переполняет своего родителя. Поэтому установите для родительского элемента div #content значение overflow: auto или overflow: hidden css, и оно должно расширяться / переполняться, чтобы соответствовать, а не прокручиваться. Наверное, в следующий раз лучше задать такие вопросы как новые вопросы, чем в комментариях :)
После того, как вы попробовали каждый метод ответа, это единственный, который работает. Даже это работает отлично, потому что мне нужно настроить значение высоты, чтобы оно соответствовало высоте страницы, поэтому это требует настройки. Однако он работает одинаково для всех браузеров.
Большое вам спасибо за этот ответ. Это просто и хорошо работает на нескольких платформах. Я на самом деле использовал это раньше, не осознавая, около 1 года назад, хотел бы, чтобы я мог проголосовать дважды.
Свойство min-height поддерживается не всеми браузерами. Если вам нужно, чтобы ваш #content увеличил его высоту на более длинных страницах, свойство height сократит его.
Это немного похоже на взлом, но вы можете добавить пустой div шириной 1 пиксель и высотой, например. 1000 пикселей внутри вашего #content div. Это заставит контент быть высотой не менее 1000 пикселей и по-прежнему позволит более длинному контенту увеличивать высоту при необходимости.
У меня нет кода, но я знаю, что однажды сделал это, используя комбинацию height: 1000px и margin-bottom: -1000px; Попробуй это.
Вау, это действительно работает! Но если содержимое выходит за пределы контейнера, то переполненную часть увидеть не удастся ...
Хотя это не так элегантно, как чистый CSS, небольшой фрагмент javascript может помочь в этом:
<html>
<head>
<style type='text/css'>
div {
border: 1px solid #000000;
}
</style>
<script type='text/javascript'>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
В зависимости от того, как работает ваш макет, вы можете обойтись установкой фона для элемента <html>, который всегда равен по крайней мере высоте области просмотра.
Ваша проблема заключается не в том, что div не на 100% высоте, а в том, что контейнер вокруг него не так. Это поможет в браузере, который, как я подозреваю, вы используете:
html,body { height:100%; }
Возможно, вам также придется отрегулировать отступы и поля, но это даст вам 90% пути. Если вам нужно заставить его работать со всеми браузерами, вам придется немного повозиться с этим.
На этом сайте есть несколько отличных примеров:
http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
Еще рекомендую зайти на http://quirksmode.org/
Это решение не подходит для прокручиваемых страниц.
Свойство min-height в CSS должно ему помочь ... я думаю
Интересно, что это отсортировало мои проблемы с прокруткой, а не вызвало их
У меня не работает в последней версии хрома.
Попробуйте решение "липкого нижнего колонтитула" от Райана Фейта,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Работает в IE, Firefox, Chrome, Safari и, предположительно, в Opera, но не тестировал это. Отличное решение. Очень просто и надежно реализовать.
Пытаться:
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
Еще не тестировал ...
Это невозможно сделать, используя только таблицы стилей (CSS). Некоторые браузеры не принимают
height: 100%;
как более высокое значение, чем точка обзора окна браузера.
Javascript - самое простое кроссбраузерное решение, хотя, как уже упоминалось, не чистое или красивое.
Я знаю, что это не лучший метод, но я не мог понять его, не испортив позиции в заголовке, меню и т. д. Итак .... Я использовал таблицу для этих двух столбцов. Это было БЫСТРОЕ исправление. JS не требуется;)
Попробуйте http://mystrd.at/modern-clean-css-sticky-footer/
Ссылка выше не работает, но эта ссылка https://stackoverflow.com/a/18066619/1944643 в порядке. : D
Демо:
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<meta name = "author" content = "http://mystrd.at">
<meta name = "robots" content = "noindex, nofollow">
<title>James Dean CSS Sticky Footer</title>
<style type = "text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<article>
<!-- or <div class = "container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
</body>
</html>
@codemirror, спасибо, я только что отредактировал комментарий, добавив еще одну работающую ссылку.
Липкий нижний колонтитул с фиксированной высотой:
Схема HTML:
<body>
<div id = "wrap">
</div>
<div id = "footer">
</div>
</body>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
Я постараюсь ответить на вопрос прямо в заголовке, вместо того, чтобы быть одержимым приклеиванием нижнего колонтитула к нижней части страницы.
Сделайте так, чтобы div расширялся до нижней части страницы, если содержимого недостаточно для заполнения доступного вертикального окна просмотра браузера:
Демо в (перетащите маркер кадра, чтобы увидеть эффект): http://jsfiddle.net/NN7ky
(положительная сторона: чистый, простой. недостаток: требуется flexbox - http://caniuse.com/flexbox)
HTML:
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}
та-да - или я слишком сонный
Некоторым из нас посчастливилось поддерживать только «современные» браузеры, так что это было для меня невероятно полезно. Спасибо, Гима. Я пробовал несколько способов сделать что-то подобное, но это всегда ломалось разными тонкими способами. Это намного лучше. До сих пор не совсем понимаю, почему это так работает.
Элемент Flexbox пытается разделить область содержимого между элементами в нем. Предлагаемое мною решение работает следующим образом: 1) запретить сжатие div и 2) разрешить рост .div2. Следовательно, div не сжимается, чтобы скрыть свое содержимое, и только .div2 может расширяться.
Таким образом, это решает проблему, с которой я столкнулся в Firefox, где содержимое все еще было немного слишком большим для браузера. К сожалению, в Chrome это само по себе не решает эту проблему. Однако установка полей и отступов на 0 делает это.
это правильный ответ, min-height: 100% работает только в том случае, если в родительском контейнере больше ничего нет, а calc на самом деле не помогает, если брат выше расширяющегося элемента имеет неизвестную высоту
После нескольких часов борьбы с этой проблемой, это единственное решение, которое действительно исправило ее для меня. Отсутствует только небольшое объяснение того, что делает каждая часть. Но в любом случае, большое спасибо @Gima.
Работает в Opera 12. Достаточно для меня. / lol Edit: это действительно должен быть принятый ответ.
Вы можете использовать единицу длины "vh" для свойства min-height самого элемента и его родителей. Поддерживается с IE9:
<body class = "full-height">
<form id = "form1">
<div id = "header">
<a title = "Home" href = "index.html" />
</div>
<div id = "menuwrapper">
<div id = "menu">
</div>
</div>
<div id = "content" class = "full-height">
</div>
</body>
CSS:
.full-height {
min-height: 100vh;
box-sizing: border-box;
}
Это только растягивает div до высоты области просмотра, но не до самой страницы.
Я думаю, что проблема будет решена, просто сделав заполнение html на 100%, может быть тело заполняет 100% html, но html не заполняет 100% экрана.
Попробуйте:
html, body {
height: 100%;
}
Что вы хотите, чтобы он делал, если на странице больше контента, чем может поместиться? Какие браузеры вас интересуют?