6

没想到用css写一个简单的两列布局这么复杂....哈哈

我想要做的是以下内容：

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

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

    我的布局是：

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

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

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

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

<---容器结束--------------->

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

谢谢/

4

3 回答 3

2 
#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 从可见窗口的顶部延伸到底部。

于 2011-10-09T02:33:40.717 回答
0

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

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

于 2011-10-09T02:26:57.273 回答
0

如果您遇到困难，也可以使用display:table和创建列。这是CSS：display:table-cellfloat

#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在某些旧浏览器中不起作用。

于 2011-10-09T07:39:45.853 回答