Как установить высоту на главный 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

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

Answer 3

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

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

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

Gushiken

Answer 4

Я месили при попытке сделать это строго с 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, но, похоже, это проще сделать так.