我想要一个两列布局，其中两列的大小彼此成比例，并且不会重叠。左列在其顶部只有一点内容，并且应该向下滚动页面（随着页面向下滚动，浮动页面。）右列将包含大量数据，并且没有滚动条，浏览器将向下滚动页面。
所以我想结合下面的两个例子，这样当调整字体大小并改变内容时，列保持比例，如例2所示，但我还需要左侧内容跟随用户在屏幕上当他们滚动以查看第2列的所有内容时（如示例1中所示）。
请在此处查看示例以了解我在说什么：
我在左侧div中使用JQuery UI日历更新了示例，以显示position：fixed;布局不会调整右列correclty（JQuery日历有问题，因为它溢出了div。）
我想要一个两列布局，其中两列的大小彼此成比例，并且不会重叠。左列在其顶部只有一点内容，并且应该向下滚动页面（随着页面向下滚动，浮动页面。）右列将包含大量数据，并且没有滚动条，浏览器将向下滚动页面
答案 0 :(得分：2)
如果您使用DIV分割页面，您可以实现此效果，如下所示：
<div style='position: fixed;width: 20%;'>
Text for the left column.
Should scroll down the page
</div>
<div style='float: right; width: 80%;'>
*insert large content here. including table content if you want.*
</div>
答案 1 :(得分：1)
position:fixed元素基本上是一个绝对定位的元素，相对于浏览器窗口定位。
这意味着它将从文档流中删除，并且不会影响元素定位（或调整大小）之前或之后的元素。这就是为什么当固定位置元素太宽时，左列不会改变宽度的原因。
您应该知道ie6不支持position:fixed并且默认返回position:static。如果您使用严格的doctype，ie7仅支持position:fixed。