Css 如何设置主div的高度？

我需要将主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>

body{text align:center；}
#主{宽度：200px；边距：0px自动；背景：#cccc；}
#标题{高度：20px；背景：#00FFFF；}
#内容{高度：80px；背景：#cccc；}
#页脚{背景：#0000FF；高度：20px；}
.demo{宽度：90%；边距：0px自动；}
主要
标题
内容
页脚

您可以尝试“位置：固定；底部：页脚div上的0px。

这可以正常工作，但如果内容高度大于屏幕大小，则可能会出现问题。。如果box main的屏幕大小为100%，那么我会尝试以下方法：

#main{ position:relative; min-height:100%; height:100%; height:auto !important; } #footer{ position:absolute; bottom:0px; } #主要{ 位置：相对位置； 最小高度：100%； 身高：100%； 高度：自动！重要； } #页脚{ 位置：绝对位置； 底部：0px； } 所有的高度值只是为了使内容至少适合屏幕大小，但如果内容变大，它可能会扩展

---

Gushiken

我曾多次尝试严格使用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，但这样做似乎更容易。

这种方法效果很好：

如果位置赋予页脚，则页脚的宽度会增加。您也可以设置“宽度：200px；边距：0自动”以保持其宽度。我为什么收到votedown？有人对我的解决方案有意见吗？我真的很想知道，因为当我测试它时，它工作得很好。它不工作！u代码缺少一些主体CSS，比如这个主体{高度：100%，边距：0px；填充：0px；}是布兰登·蒙哥马利先生的权利，但我正试图使用CSS。如果我没有得到它，我将使用Jquery。谢谢你看一看。真不敢相信这个有多简单