关于两列布局的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。