css - div位置 - css

Question

我试图实现，div 的行为就像图片上的一个例子，使用 css：

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

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

谢谢

Answer 1

如果侧边栏（或任何其他 div）的高度为 100%，并且顶部有一个 30px 的标题，那么这会导致您的容器为 100% + 30px 的高度。

将来您将在 css3 calc() 中使用：http: //hacks.mozilla.org/2010/06/css3-calc/ 这将解决您的问题。

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

在这里检查小提琴

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

无需任何特殊的divCSS 即可实现顶部。要在下面放置一些东西（例如页脚），您需要使用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