如何在HTML/CSS中创建两个比例列，其中左列跟随用户滚动？

我想要一个两列的布局，其中两列大小成比例，不会重叠。左列顶部只有一点点内容，应该随页面向下滚动（向下滚动时随页面一起浮动）。右列将有大量数据，没有滚动条，浏览器将向下滚动页面

因此，我想结合下面的两个示例，以便在调整字体大小和内容更改时，列保持与示例2中相同的比例，但我还需要左侧内容跟随用户向下滚动以查看所有列2（如示例1所示）

请参见此处的示例，了解我所说的内容：

我已经用左div中的jqueryui日历更新了这个示例，以显示position:fixed；布局不会调整正确列的大小（JQuery日历有问题，因为它溢出了div。）

我想要一个两列的布局，其中两列大小成比例，不会重叠。左栏顶部只有一点点内容，应该随页面向下滚动（向下滚动时随页面一起浮动）。右栏将有大量数据，没有滚动条，浏览器将向下滚动页面。

---

如果使用DIVs分割页面，可以实现以下效果：

<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>

左栏的文本。
应该向下滚动页面
*在此处插入大内容。如果需要，请包括表内容*

如果使用DIVs分割页面，可以实现以下效果：

<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>

左栏的文本。
应该向下滚动页面
*在此处插入大内容。如果需要，请包括表内容*

具有

位置的元素：fixed

基本上是绝对定位的元素，相对于浏览器窗口定位

这意味着它将从文档流中删除，并且不会影响元素在定位（或调整大小）之前或之后的方式。这就是为什么当固定位置元素太宽时，左列的宽度不会改变

---

您应该知道ie6不支持

position:fixed

，默认回到

position:static

。如果您使用的是严格的doctype，ie7仅支持

position:fixed

。

具有

position:fixed

的元素基本上是绝对定位的元素，相对于浏览器窗口定位

这意味着它将从文档流中删除，并且不会影响元素在定位（或调整大小）之前或之后的方式。这就是为什么当固定位置元素太宽时，左列的宽度不会改变

---

您应该知道ie6不支持

position:fixed

，默认回到

position:static

。ie7仅支持

position:fixed

如果您使用的是严格的doctype。

表不会显示在堆栈溢出上，FWIW。表不会显示在堆栈溢出上，FWIW。我在左侧用jquery日历更新了示例：在这种情况下，表布局将根据日历的大小调整右第二列的大小，但位置：固定；布局不会强制调整右栏的大小，日历将溢出右栏。20%/80%的宽度只是一个示例大小。如果在设计时知道左栏所需的大小，您可以相应地调整宽度。您好，Marshall，我的问题是，在不同的屏幕大小和字体设置上，JQuery日历将溢出其div，并占用超过x%的屏幕。我希望右边的列随着左边的变大而调整大小，这样就不会有重叠。我用左边的jquery日历更新了示例：在这种情况下，表布局将根据日历的大小调整右边第二列的大小，但位置：fixed；布局不会强制调整右栏的大小，日历将溢出右栏。20%/80%的宽度只是一个示例大小。如果在设计时知道左栏所需的大小，您可以相应地调整宽度。您好，Marshall，我的问题是，在不同的屏幕大小和字体设置上，JQuery日历将溢出其div，并占用超过x%的屏幕。我希望右手边的列随着左手边变大而调整大小，这样就没有重叠。