我想要的是一个两列的CSS布局，有一个固定的边栏(在右边)，比如300px宽，对于一个流动的左边列，它会扩展到适合屏幕大小和高度，然后在左边列提供一个垂直的滚动条，如果内容需要的话。
<html>
<head>
<style type="text/css">
body {margin:0px;}
#outer {
overflow: hidden;
width: 100%;
height:608px;
background: #ddd;
}
#inner1 {
float: right;/* Make this div as wide as its contents */
width:300px;
padding:10px;
background: #fdd;
}
#inner2 {
overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */
padding:10px;
background: #ddf;
#divScroll {
overflow: scroll;
height:600px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner1">
inner div 1. Some text...
</div>
<div id="inner2">
<div id="divScroll">
inner div 2... <br />
inner div 3... <br />
inner div 2... <br />
.
.
enough text here to make it scroll !
.
.
inner div 2... <br />
inner div 2... <br />
inner div 2... <br />
inner div 2... <br />
</div>
</div>
</div>
</body>
</html>
不确定这是否是你的意思，但我认为你想要这样的东西:
http://jsfiddle.net/spacebeers/s8uLG/3/将容器的溢出设置为隐藏，然后在每个div上添加负的margin-bottom和相等的正的padding-bottom。
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>