Question

我有一个像这样的HTML文件（我只放了页面的正文）：

<body>
    <form id="form1" runat="server">
    <div class="divBody">
        <div id="divHeader">
        </div>
        <div id="leftColumn">
       Welcome!
        </div>
        <div id="rightColumn">
        </div>
    </div>
    </form>
</body>

它的css文件包含：

.divBody {
    border-style: dotted;
    border-width: medium;
    margin: 0 auto;
    width: 1024px;
    height: 768px;
    position: relative;
}
#divHeader {
    width: 100%;
    height: 70px;
    background-color: #000000;
}
#leftColumn {
    width: 33%;
    height: 100%;
    background-color: #FF0000;
    float: left;
}
#rightColumn {
    width: 66%;
    height: 100%;
    background-color: #00FF00;
}

我想要一个标题和两列。标题是好的，但是列大于divBody的高度，而rightColumn不适合divBody宽度的66％。

发生了什么事？

谢谢。

Answer 1

您的标头已修复height: 70px;并正在推倒列。您可以向divBody添加填充以对此进行处理：see it in action。

您还需要制作正确的列float，否则它位于左侧列下方，而不是位于右侧列。

您应该依赖Blueprint或YUI 2: Grids。如果您不喜欢CSS框架，那么还有其他好的资源，例如multi-column liquid layouts。

注意：我不知道这是不是你的意思，但是33％+ 66％== 99％因此存在差距。

Answer 2

我认为您需要为rightColumn添加float-right：

#rightColumn {
    width: 66%;
    height: 100%;
    background-color: #00FF00;
    float: right;
}

关于列的高度：我认为这是因为相对布局。为了使列的高度完美匹配，您可以计算确切的像素数，如下所示：

#leftColumn {
   width: 33%;
   height: 698px;
    background-color: #FF0000;
   float: left;
}
#rightColumn {
    width: 66%;
    height: 698px;
    background-color: #00FF00;
    float: right;
}

（身高 - 头高= 768 - 70 = 698）

但这样做的缺点是，如果身体变大，柱子可能不会垂直生长。

另一种方法是将柱子保持100％，但将它们粘在身体的顶部。你必须给他们相对的定位来做到这一点。此外，您必须抬起它们以考虑标题占用的空间：

#leftColumn {
    width: 33%;
    height: 100%;
    background-color: #FF0000;
    float: left;
    top: -70px;
    position: relative;
}
#rightColumn {
    width: 66%;
    height: 100%;
    background-color: #00FF00;
    float: right;
    top: -70px;
    position: relative;
}

Answer 3

如果您正在寻找类似的内容，我强烈建议您使用YUI Grids。他们已经完成了提供布局（跨浏览器）的工作，你只需要填充你的数据。非常好用，非常好（设置与你的相似）。

Answer 4

我认为这可能会对您有所帮助：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

您不必使用网格系统，也不会使用额外的javascript或css hacks。

Div Layout存在问题

4 个答案: