Как заставить блок 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;
}
18 ответов
ваша проблема не в том, что 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/
Я постараюсь ответить на вопрос прямо в заголовке, а не быть одержимым вставкой нижнего колонтитула в нижней части страницы.
Make div extend to the bottom of the page if there's not enough content to fill the available vertical browser viewport:
Demo at (перетащите ручку кадра, чтобы увидеть эффект):http://jsfiddle.net/NN7ky
(upside: чистый, простой. недостаток: требуется 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;
}
та-да - или я просто слишком сонный
попробуйте поиграть со следующим правилом css:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
измените высоту в соответствии с вашей страницей. высота упоминается дважды для совместимости с кросс-браузером.
вы можете взломать его с помощью мин-высота декларация
<div style="min-height: 100%">stuff</div>
попробуйте решение Райана Фейта "липкий нижний колонтитул",
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
работает через IE, Firefox, Chrome, Safari и предположительно Opera тоже, но не проверял это. Это отличное решение. Очень легко и надежно реализовать.
свойство min-height поддерживается не всеми браузерами. Если вам нужно, чтобы ваш #content расширил его высоту на более длинных страницах, свойство height сократит его.
Это немного хак, но вы можете добавить пустой div с шириной 1px и высотой, например, 1000px внутри вашего # content div. Это заставит контент быть по крайней мере 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, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
еще не проверял...
нижний колонтитул с фиксированной высотой:
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;
}
Я думаю, что проблема будет исправлена, просто сделав заполнение html 100% также, может быть, тело заполняет 100% html, но html не заполняет 100% экрана.
попробовать с:
html, body {
height: 100%;
}
попробуйте 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>
Также вам может понравиться это:http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
Это не совсем то, что вы просили, но он также может удовлетворить ваши потребности.
У меня нет кода, но я знаю, что сделал это один раз, используя комбинацию height:1000px и margin-bottom: -1000px; попробуйте это.
в зависимости от того, как работает ваш макет, вы можете уйти с установкой фона на <html>
элемент, который всегда является по крайней мере высотой окна просмотра.
это невозможно сделать, используя только таблицы стилей (CSS). Некоторые браузеры не принимают
height: 100%;
как более высокое значение, чем точка зрения окна браузера.
Javascript-это самое простое кросс-браузерное решение, хотя, как уже упоминалось, не чистое или красивое.
вы можете использовать единицу длины "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;
}
Я знаю, что это не лучший метод, но я не мог понять это, не испортив мой заголовок, меню и т. д. позиции. Так.... Я использовал таблицу для этих двух колонн. Это было быстрое решение. Нет необходимости в JS;)
Не самая лучшая и не лучшая реализация самых больших стандартов, но вы можете изменить DIV на промежуток... Это не так рекомендуемое, но быстрое исправление =P =)