Как заставить блок DIV расширяться до нижней части страницы, даже если у него нет содержимого? - PullRequest
Новая
       24

Как заставить блок DIV расширяться до нижней части страницы, даже если у него нет содержимого?

173 голосов
/ 29 сентября 2008

В разметке, показанной ниже, я пытаюсь заставить 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 ]

103 голосов
/ 23 февраля 2009

Ваша проблема не в том, что 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/

38 голосов
/ 02 июня 2014

Я постараюсь ответить на вопрос прямо в заголовке, вместо того, чтобы одержимо наклеивать нижний колонтитул внизу страницы.

Увеличьте размер 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;
}

Та-да - или я просто слишком сонный

15 голосов
/ 29 сентября 2008

Попробуйте поиграться со следующим правилом CSS: 

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Измените высоту в соответствии с вашей страницей. высота упоминается дважды для совместимости с различными браузерами.

6 голосов
/ 29 сентября 2008

вы можете взломать его с помощью min-height декларации 

<div style="min-height: 100%">stuff</div>
4 голосов
/ 26 июля 2009

Попробуйте решение Ryan Fait "Sticky Footer",

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Работает в IE, Firefox, Chrome, Safari и, предположительно, Opera, но еще не проверял это. Это отличное решение. Очень легко и надежно реализовать.

3 голосов
/ 30 сентября 2008

Хотя это не так элегантно, как чистый 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>
3 голосов
/ 29 сентября 2008

Свойство min-height поддерживается не всеми браузерами. Если вам нужно #content увеличить высоту на более длинных страницах, свойство height сократит его.

Это что-то вроде хака, но вы можете добавить пустой div с шириной 1px и высотой, например. 1000px внутри вашего #content div. Это приведет к тому, что контент будет иметь высоту не менее 1000 пикселей и все же позволит более длинному контенту увеличивать высоту при необходимости

3 голосов
/ 08 марта 2011

Попробуйте: 

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

Еще не проверял ...

3 голосов
/ 15 августа 2013

Липкий нижний колонтитул с фиксированной высотой:

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;
}
1 голос
/ 08 августа 2016

Я думаю, что проблема будет решена, если HTML будет заполнен на 100%, Возможно, тело заполняет 100% HTML, но HTML не занимает 100% экрана.

Попробуйте с: 

html, body {
      height: 100%;
}
Страница:
...