CSS:100% 高度问题

Question

我知道有很多关于 height:100% CSS 声明的帖子，但没有一个能解决我正在努力解决的问题。

简而言之，这就是我面临的问题: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 中删除高度:100%

这应该有效(至少对于 Firebug )。