CSS：100% 高度问题

Question

我知道有很多关于 CSS 中 height: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...它只是漂浮在所有其他元素之上。

• 删除所有position:absolute
• 给div#sidebar一个float:left
• 给div#static-maincontent一个float:right
• 添加类似的东西
  在 div#static-maincontent 和 INSIDE div#static-content 之后
• 从 div#static-content 中删除 height: 100%

这应该可以工作（至少对于 firebug）。

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 的结束标记后面