关于CSS的双列布局

Question

我从未想过使用css编写简单的两列布局会如此复杂....哈哈

我想要实现以下内容：

1. 当内容div的高度超过屏幕尺寸时，滚动条仅在内容div中存在。用户只能滚动内容div，而侧边栏保持静态。 2. 两列应具有相同的高度。

我的布局是： <---------------container-------------------> <-------------------header------------------> <-----sidebar------><---------content---> <------------------footer-------------------> <---End of container-------------------------> 这是我的css文件： http://137.189.145.40/c2dm/css/main.css

- Bear

---

我不知道你在第一点中想说什么。 "滚动条仅存在于内容div中，而不是相同的网站"???? 我建议你在jsfiddle.com页面上放置一些代码以说明你想要什么。 - Erik Funkenbusch

抱歉，打错了。我的意思是用户可以滚动内容部分，同时保持左侧边栏静态。 - Bear

整个布局是否应该与“屏幕”（视口）的大小完全相同？ - thirtydot

是的。我希望我的网站能够最大化适应屏幕。 当内容部分过长时，用户可以滚动内容部分，同时保持侧边栏静态。 - Bear

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。

- Matthew Cox

---

非常感谢。但是我想将网站的高度最大化，使网站的高度=浏览器的高度... 而互联网上的教程告诉我应该设置100%的高度来实现这一点。 - Bear

@Bear，你的教程是错误的。那样做不会得到你想要的结果。此外，它会导致你现在所处的困境。你没有为内部div计算高度，因此它们最终的高度为0。 - Matthew Cox

那意味着我不能最大化我的网站高度以适应屏幕高度吗？ 还是应该使用JavaScript来设置高度？ :) - Bear

@Bear，我发布了一种获取你想要的东西的替代方法。 - Matthew Cox

Answer 2

如果你在使用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无法正常工作。

- Abhishek Biswal

Answer 3

您需要将容器元素设置为overflow:hidden;，并将内容div设置为overflow:scroll;（可能还需要使用overflow-x:hidden;来隐藏水平滚动条）。问题在于，如果您的侧边栏和内容高度相同，则必须有两个滚动条-一个用于内容，另一个用于侧边栏。

您可以通过在侧边栏和内容周围使用另一个容器元素，并在其上设置overflow: scrollbar; overflox-x:hidden;来解决此问题，而不是在侧边栏/内容上设置。

- Bradley Staples