Question

我知道有很多关于身高的帖子：CSS中的100％声明，但没有一个能解决我正在努力解决的问题。

简而言之，这就是我所面对的：http://cornerstonearts.hostasaurus.com/about/cornerstone_history

元素和容器div的所有高度设置 - html，body，＃static-content，＃sidebar，＃static-maincontent - 都是100％：

html {
height: 100%;
}

body {
background-color:#d5af6a;
margin:0;
height: 100%;
}

#static-content {
width:960px;
background-color:#FFF;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
height: 100%;
overflow-y: visible;
}

#sidebar {
width:320px;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
overflow-y: visible;
}

#static-maincontent {
width:600px;
position: absolute;
left: 340px;
top: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #AC740C;
height: 100%;
overflow-y: visible;
}

我读了几篇帖子，暗示问题可能是使用绝对定位。我没有看到这可能是什么原因。如果DIV绝对定位，它仍然应该扩展以适应其内容。

然而，使用Firebug，我改变了所有要相对定位的元素，并让侧边栏和主列向左浮动。我仍然遇到同样的问题。

这是我确信必须有一个我只是没有看到的简单解决方案之一。毕竟，将页面元素扩展到其容器高度的100％有多难？

任何帮助都将不胜感激。

谢谢！

Answer 1

绝对定位的元素不会以任何方式影响包装元素。所以div＃static-maincontent的高度并没有真正转化为div＃static-content ...它只是漂浮在所有其他元素之上。

删除所有位置：绝对
给div＃sidebar a float：left
给div＃static-maincontent a float：right
添加类似＆lt; div style =“clear：both;”＆gt;在div＃static-maincontent和INSIDE div＃static-content
从div＃static-content

这应该有效（至少用萤火虫）。

Answer 2

更改css中的以下内容（使用firebug进行测试 - 工作） -

#static-content {
width: 960px;
background-color: white;
margin:0 auto;
position: relative;
height: auto;
overflow: hidden;
}
#sidebar {
width: 320px;
height: 100%;
overflow-y: visible;
float: left;
}
#static-maincontent {
width: 600px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #AC740C;
overflow-y: visible;
height: 100%;
float: left;
}

Answer 3

我相信这实际上会解决你的问题。 http://jsfiddle.net/AVRMy/1/

我摆脱了：

overflow-y: visible;
height: 100%;

来自你的所有CSS。然后补充说：

        <div style="clear: both; width: 100%;"></div>

在div static-maincontent的结束标记之后。

CSS：100％高度问题

3 个答案: