如何将高度设置为主div？

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

来源

2009-04-09 Shiva Srikanth Thummidi

看一看[这个问题]（http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-到待在最底的-A-网页）。 – 2009-04-09 12:36:51

简直不敢相信这一点是多么简单 – wheresrhys 2009-04-09 16:03:32

做的这种方式工作得很好：http://www.xs4all.nl/~peterned/examples/csslayout1.html

来源

2009-04-09 15:57:17 wheresrhys

你可以试试'position：fixed;底部：0px'在页脚div上。

来源

2009-04-09 12:00:59 mishac

如果位置是给页脚它的宽度是增加。 – 2009-04-09 12:03:28

您可以设置“宽度：200px;边距：0自动”以及保持其宽度。 – mishac 2009-04-09 12:06:36

这将正常工作，但如果内容的高度变得比屏幕尺寸更大的可能是一个问题。如果包装盒主可以以100％的屏幕尺寸，然后我会尝试这样的事情：

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

所有heigth值只是为了使内容至少适合屏幕尺寸，但如果内容变大，它可能会扩大。

具志坚

来源

2009-04-09 12:27:35 SvenFinke

我为什么收到一个投票？我的解决方案有任何问题吗？真的很想知道，因为它工作正常，当我测试它 – SvenFinke 2009-04-09 12:41:01

它不工作！ u代码是缺少一些身体CSS像这个身体{身高：100％，边距：0px;填充：0px;} – 2009-04-10 04:39:53

我搅上尝试与多次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，但似乎更容易这样做。

来源

2009-04-09 12:34:22

雅先生布兰登蒙哥马利它的权利，但我想使它使用CSS。如果我没有得到它，我会使用Jquery。谢谢 – 2009-04-09 12:42:33

如何将高度设置为主div？

回答

相关问题