CSS拉伸div高度超过了站点容器和浏览器窗口

我正在尝试使页脚底部为100％的高度布局。我有一个网站包装，其中我有两个内容div。在第二个内容div中，我在底部有一个页脚。问题在于顶级内容div似乎推动了网站封装之外的第二个内容div。CSS拉伸div高度超过了站点容器和浏览器窗口

这是我与试验验证码：

<style type="text/css"> 
html, body { height:100%;} 

#sitecontainer { 
    height:100%; 
    border: medium #000 solid; 
} 
#contentcontainerone{ 
    border: medium #F00 solid; 
} 
#contentcontainertwo{ 
    height:100%; 
    border: medium #00F solid; 
    position:relative; 
} 
#footer{ 
    position:absolute; 
    bottom:0; 
    width:100%; 
    text-align:center; 
} 
</style> 
</head> 

<body> 
<div id="sitecontainer"> 
    <div id="contentcontainerone"> 
    Some content <br /> 
    Some content <br /> 
    Some content <br /> 
    Some content <br /> 
    Some content <br /> 
    </div> 
    <div id="contentcontainertwo"> 
     <div id="footer">Footer</div> 
    </div> 
</div> 
</body>

这是链接到页面：http://www.smsidat.com/test/index.html

我基本上要实现的是，该网站应始终是100％高度明智的，所以伸展到浏览器窗口的底部或内容结束时，如果它的高度更高，页脚位于底部。因此，理想情况下，带蓝色边框的div应该保留在具有黑色边框的包装中，并且不得超过浏览器窗口底部或内容末尾（如果较大）。

希望如何解决这个问题的任何想法，谢谢。

来源

2010-11-27 SMSidat

-2

试图对齐另一个div底部的DIV可能会很棘手。有很多方法可以做到这一点，但我建议只使用表格。

<table> 
    <tr> 
     <td><div id="header"></div></td> 
    </tr> 
    <tr> 
     <td><div id="content"></div></td> 
    </tr> 
    <tr> 
     <td><div id="footer"></div></td> 
    </tr> 
</table>

然后使用CSS来定义每个DIV的高度，与直到而页眉和页脚的DIV留在原来的高度发生溢出内容DIV与页面拉伸。

来源

2010-11-27 11:49:16 bitxwise

使用表来解决这个问题本身就是一种破解。 – Rob 2010-11-27 13:07:41

我并不是建议使用表格来“解决”这个问题。我建议将它作为一种替代方法。问题是试图将DIV高度设置为相对可能会非常棘手，因为没有静态高度。每个浏览器处理这些设置的方式不同此外，他有2个内容DIV，并且使事情更复杂，如果其中一个内容DIV包含另一个DIV，他希望一路延伸，该怎么办？有没有简单的方法来做到这一点，通过CSS的DIV定位和相对高度分配。 – bitxwise 2010-11-27 13:25:11

这里的解决方案：

html, body 
{ 
    height: 100%; 
    overflow: hidden; 
} 

#sitecontainer 
{ 
    height: 100%; 
    position: relative; 
} 

#footer /*OUTSIDE THE CONTAINER */ 
{ 
    bottom: 0; 
    position: absolute; 
    height: 50px; /*change this*/ 
}

来源

2010-11-27 12:02:18

使用<table>标签确实不推荐布局。如上所述，CSS3有很多方法可以解决这个问题（对容器及其父母使用100％高度，直至html标签）。有些情况下（参考：Eric Meyer，Smashing CSS书），但是，当CSS样式属性可以适合布局时......至少它将布局控制放回CSS中而不是内容作为最佳实践。

来源

2013-01-15 15:56:57

CSS拉伸div高度超过了站点容器和浏览器窗口

回答

相关问题