Как заставить блок DIV расширяться до нижней части страницы, даже если он не имеет содержимого?
https://stackoverflow.com/questions/147528
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
В разметке, показанной ниже, я пытаюсь растянуть элемент содержимого до самого низа страницы, но он растягивается только в том случае, если есть контент для отображения.Причина, по которой я хочу это сделать, заключается в том, чтобы вертикальная граница по-прежнему отображалась внизу страницы, даже если нет контента для отображения.
Вот мой 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;
}
Решение
Ваша проблема не в том, что 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/
Другие советы
Я постараюсь ответить на вопрос прямо в заголовке, а не одержима приклеиванием нижнего колонтитула внизу страницы.
Расширьте div до нижней части страницы, если содержимого недостаточно для заполнения доступной вертикальной области просмотра браузера:
Демо (перетащите маркер кадра, чтобы увидеть эффект): http://jsfiddle.net/NN7ky
(верхняя сторона:чистый, простой.обратная сторона:требуется флексбокс - 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 шириной 1 пиксель и высотой, например.1000 пикселей внутри вашего div #content.Это заставит контент иметь высоту не менее 1000 пикселей, но при этом позволит более длинному контенту увеличивать высоту при необходимости.
Хотя это не так элегантно, как чистый 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
Это не совсем то, что вы просили, но это также может удовлетворить ваши потребности.
У меня нет кода, но я знаю, что однажды сделал это, используя комбинацию высоты: 1000 пикселей и поля-дна:-1000 пикселей;Попробуй это.
В зависимости от того, как работает ваш макет, вам может сойти с рук установка фона на <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;
}
Не самая лучшая и не лучшая реализация величайших стандартов, но вы можете заменить DIV на SPAN...Это не очень рекомендуемое, но быстрое решение =P =)
Я знаю, что это не лучший метод, но я не мог разобраться в нем, не испортив позиции заголовка, меню и т. д.Так....Я использовал таблицу для этих двух столбцов.Это было БЫСТРОЕ решение.Никакого JS не нужно ;)
