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

你可以试试'位置：固定;底部：页脚div上的0px'。

Answer 2

这样可以正常工作，但如果内容高度大于屏幕尺寸，则可能会出现问题..如果主框架的主屏幕尺寸为100％，那么我会尝试这样的事情：

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

所有高度值只是为了使内容至少适合屏幕大小，但如果内容变大则可能会扩展。

具志坚

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

这种方式非常有效：http://www.xs4all.nl/~peterned/examples/csslayout1.html

如何设置主要div的高度？

4 个答案: