css - 用颜色填充剩余区域？

Question

上面是我正在尝试完成的屏幕截图。我尝试设置 height:100%，但由于 margin-top:48px 导致我出现“溢出”，导致我向下滚动，即使内容适合 1屏幕。现在内容只有彩色部分(为了清楚起见，我将其编辑掉了)。

它的 CSS 是:

#main_area {
    float: left;
    width: 600px;
    margin-top: 48px;
    padding: 0px 20px;
}

.sidebar { /* this one here */
    float: left;
    left: 10px;
    width: 278px;
    padding-top: 48px;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #FFFFFF
}

Answer 1

唉， float DIV 并不是您要实现的目标的好解决方案 - 这是您将不得不恢复使用多列 TABLE 或使用 Javascript 变得时髦的情况之一。

请记住 - 当您 float DIV 时，它实际上是从页面流布局中删除并 float 在页面内容之上。将高度设置为 100% 不会将列的高度设置为其 float 页面的高度 - 它会将 float DIV 的高度设置为 float DIV 内容的组合高度。

在 O'Reilly 的“Head First HTML”中对此有很好的描述。

老实说，如果您想创建真正可控的多列页面设计，TABLE 可能是您的最佳选择。