как установить высоту для основного div?

Question

Мне нужно растянуть основную высоту div до высоты порта просмотра и разместить нижний колонтитул внизу экрана. кто-нибудь может решить это?

body{text-align:center;}
#main{width:200px;margin:0px auto;background:#cccccc;}
#header{height:20px;background:#00FFFF;}
#content{height:80px;background:#cccccc;}
#footer{background:#0000FF;height:20px;}
.demo{width:90%;margin:0px auto;}


 <div id="main">MAIN
     <div id="header" class="demo">HEADER</div>
     <div id="content" class="demo">CONTENT</div>
     <div id="footer" class="demo">FOOTER</div>
 </div>

Answer 1

Этот способ работает довольно хорошо: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Answer 2

Это будет работать нормально, но может быть проблемой, если высота содержимого становится больше, чем размер экрана. Если основной блок может иметь размер экрана 100%, то я бы попробовал что-то вроде этого:

#main{
position:relative;
min-height:100%;
height:100%;
height:auto !important;
}
#footer{
position:absolute;
bottom:0px;
}

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

Gushiken

Answer 3

Я несколько раз пытался сделать это строго с помощью CSS (с учетом кросс-браузерной совместимости). Мне проще написать быстрый скрипт jQuery, который обрабатывает изменение размера div до соответствующего размера.

    $(document).ready(function () {
      /* this could be something different, like subtracting the height of your footer or something */

      $(window).resize(function () { resizeMyDiv(); });
    });

    function resizeMyDiv() { 
      $("#divResize").height($(window).height()); 
    }

Не уверен, что вы используете jQuery, но, кажется, проще сделать это таким образом.

Answer 4

Вы можете попробовать 'положение: исправлено; внизу: 0px 'в нижнем колонтитуле.