CSS关于两列布局

Question

我从来没有想过使用css编写一个简单的两列布局是如此复杂....哈哈

我想做的是以下内容：

1. 当内容div的高度超过屏幕尺寸的高度时，滚动条存在仅在内容 div 中。用户只能滚动内容 div，但侧边栏保持静态

2. 两列应具有相同的高度

   我的布局是：

<----------------容器--------------------> ;

<-------------------标题------------------>

<-----侧边栏-----><---------内容--->

<------------------页脚-------------------->

<---容器末端------------------------>

这是我的 css 文件： http://137.189.145.40/c2dm/css/main.css

Answer 1

#WorldContainer
{
     width: 1000px;
     margin: auto;
     overflow: hidden;
}

.ContentColumn
{
     float: left;
     width: 500px;
     overflow: auto;
}

<div id="WorldContainer">
   <div class="ContentColumn">
        Content goes here!
   </div>
   <div class="ContentColumn">
        Content goes here!
   </div>
</div>

这将为您提供一个页面，其中主 div 无法滚动，但两个 div 列可以滚动。他们将肩并肩。您的问题不太清楚，所以希望这就是您所追求的。

编辑：响应您显示示例站点。

你的问题其实很简单。

所有 div 的高度规则为 height: 100%;
当您使用百分比高度时，您将使其成为其所在容器（即其父容器）的百分比。 它不是整个窗口的百分比高度。

每个容器都指定一个百分比高度，因此结果是高度 0。
给你最外面的div一个固定的高度，问题就解决了。

附加编辑：

如果您担心确保最外面的 div 始终拉伸到窗口的底部，那么这是使用绝对定位的 css 解决方案：

#OutermostDiv
 {
    position: absolute;
    top: 0;
    bottom: 0;
 }

即使外部 div 没有硬性，使用此方法仍然会导致计算出的高度编码高度。这将允许您在内部 div 上使用百分比高度，并维护一个从可见窗口的顶部延伸到底部的外部 div。

Answer 2

您必须将容器元素设置为 overflow:hidden;，并将内容 div 设置为 overflow:scroll; （并且可能会执行 overflow-x:hidden ; 隐藏水平滚动条）。这样做的问题是，如果你的侧边栏和内容将具有相同的高度，那么您将必须有两个滚动条 - 一个用于内容，一个用于侧边栏。

您可能可以通过在侧边栏和侧边栏周围使用另一个容器元素来解决此问题。内容，并设置溢出：滚动条； overflox-x:hidden; 在上面而不是侧边栏/内容上。

Answer 3

如果您在使用 float 时遇到困难，还可以使用 display:table 和 display:table-cell 创建列。 CSS 如下：

#container
{
width:960px;
margin:0;
padding:0;
display:table;
}
#sidebar
{
width:300px;
display:table-cell;
}
#content
{
width:660px;
display:table-cell;
}

HTML 为：

<div id="container">

<div id="sidebar">
<!-- Sidebar Content Here -->
</div>

<div id="content">
<!-- Content Here -->
</div>

</div>

希望这能解决您的问题。但是 display:table 在某些旧浏览器中不起作用。