DIV位置 - CSS

Question

我试图来实现，即div的会像上图为例，使用CSS：

有没有干净的方式做到这一点？我使用javascript来实现这一点，以计算“左”div高度和“主”div宽度和高度。但我不喜欢这个解决方案...有没有什么办法只用CSS来做到这一点？

编辑： 页面不能有滚动条......所以页面的高度总是最高100％，并没有更多...

感谢

Answer 1

如果侧边栏（或任何其他分区）为100％的高度，并在上面你有一个30像素头，这会导致您的容器达到100％+ 30像素的高度。

在未来，你将在css3 calc（）： http://hacks.mozilla.org/2010/06/css3-calc/ 这将解决你的问题。

但现在您可以将overflow: hidden;添加到html和body部分，但我建议使用Javascript来计算边栏的高度（容器高度 - 标题高度）。

支票fiddle here

Answer 2

如果你指的是两栏布局，你做它与纯CSS是这样的：

.container { 
    background-color: #aaaaaa; 
} 

.left { 
    float: left; 
    width: 100px; 
    clear: left; 
} 

.right { 
    margin-left: 100px; 
    background-color: #888888; 
} 

和HTML：

<div class="container"> 
    <div class="left">left</div> 
    <div class="right">right</div> 
</div> 

现场演示：jsFiddle

顶部的div可以实现没有任何特殊的CSS。为了放置下面的东西（例如页脚），您需要使用clear: both。

Answer 3

没有任何代码很难确定你想要什么。这是我相信你想要的一个非常简单的版本。

HTML：

<div id="header"> 

</div> 
<div id="side"> 

</div> 
<div id="content"> 

</div> 

CSS：

#header { 
    width:100%; 
    height:50px; 
} 
#side { 
    width:300px; 
    height:100%; 
    float:left; 
} 
#content { 
    width:660px; 
    height:100%; 
    float:left; 
} 

jsFiddle