我已经环顾四周，还没有找到我正在寻找的东西，所以希望这个问题还没有在其他地方得到回答!
无论如何，有问题的布局可以在这里找到。我想要实现的是一个固定宽度的左列，和流体宽度的内容区域。在大多数情况下，它工作得很好。然而，当内容扩展超过浏览器窗口的高度或宽度时，部分似乎不像我想要的那样扩展。请注意，顶部的灰色条没有达到页面内容的右侧，左侧列的高度也没有达到页面内容的底部。
我认为这源于这样一个事实，即通过CSS设置为100%的高度或100%的宽度是静态的吗?也就是说，当CSS被调用时，无论浏览器窗口的高度/宽度是多少都会被保存，就是这样吗?
如果是这样的话，也许我需要研究一些其他的方法来设置元素的高度和宽度。什么好主意吗?另外，请注意页面中的虚拟内容目前是一个图像。我想模糊名字等，以保持数据的私密性。
谢谢你的帮助!!这样怎么样?
左列只能显示右边的内容。如果你想让它在没有足够内容填充的情况下扩展到视窗的高度你需要一些javascript或者你需要使用一个重复的背景来填充html
演示:http://jsfiddle.net/wdm954/KyUfN/
<div id="wrapper">
<div id="left">left</div>
<div id="right">
<div id="content">
<div id="top">top</div>
content
</div>
</div>
</div>
/* clearfix */
#wrapper:after, #right:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
#wrapper, #right {
display: inline-block;
}
#wrapper, #right {
display: block;
-height: 1px;
}
/* end clearfix */
#wrapper {
background-color: #000000;
}
#left {
float: left;
width: 300px;
color: #FFF;
}
#right {
margin-left: 300px;
}
#top {
height: 100px;
background-color: #DEDEDE;
border-bottom: 1px solid #B8B8B8;
}
#content {
background-color: #F4EBEB;
height: 600px;
width: 1200px;
}
如果背景是主要问题，您可以直接对包装器进行样式设置。这就是我最终为一个难以驾驭的侧边栏所做的，因为我不想求助于JS，而其他解决方案对我不起作用。在我的例子中，侧边栏的问题来自于jQuery选项卡，它是主题的一部分。当我切换到选项卡时，侧边栏不会延伸到整个高度，所以背景也不会。