CSS大约两栏布局

我从来没有想过，写一个简单的两个栏布局是如此复杂使用CSS ....哈哈CSS大约两栏布局

我想要做的是以下几点：

当内容div的高度超过屏幕大小的高度，滚动条仅存在于内容div中。该用户只能滚动内容股利，但侧边栏保持静态
两列应具有相同的高度

我的布局：

< -------- ------- container ------------------->

< ----------------- --header ------------------>

< ----- sidebar -------> < --------- content --->

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

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

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

谢谢/

来源

2011-10-09 Bear

我不知道你在第一点想说什么。 “滚动条只存在于内容div中，但不是同一个网站。”我建议你在jsfiddle.com的页面上放一些代码来说明你想要的。 –

抱歉，错字。我的意思是，用户只能滚动内容部分，而保持左侧边栏静态 – Bear

是否整个布局应该是“屏幕”（视口）的大小？ – thirtydot

#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-09 02:33:40

@熊我发布了答案给你的问题。 –

非常感谢。但我想最大限度地提高网站的高度，使网站的高度=浏览器的高度... 而互联网上的教程告诉我，我应该设置100％的高度来做到这一点 – Bear

@熊你的教程是错误的。这不会得到你以后的。另外，它会造成你现在所处的困境。你没有一个高的内部divs来计算，所以他们最终的高度为0 –

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

你也许可以通过在侧边栏&内容上使用另一个容器元素来解决这个问题，并且可以在其上设置overflow: scrollbar; overflox-x:hidden;而不是边栏/内容。

来源

2011-10-09 02:26:57

如果您遇到与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在某些旧浏览器中不起作用。

来源

2011-10-09 07:39:45

CSS大约两栏布局

回答

相关问题