2

我正在尝试制作一个没有固定高度或宽度元素的流体布局。我的页面主体分为三列（因为我希望它们都具有相同的高度，所以我决定使用 css 表）。但是，当我尝试将 100% 高度属性添加到表格 div（或表格单元格 div）时，它们不会扩展到 div.middle 的完整大小。我用完整的代码http://jsfiddle.net/3NMw5/为这个问题做了一个 JS 小提琴，但这里有一个片段：

<body>
    <div class='titleBar'>
        <div class='wrap'>
            <img src='../images/logo.png' />
        </div>
    </div>
    <div class='middle'>
        <div class='wrap mainContent'>
                <div class='leftColumn'>left here</div>
                <div class='center'>center</div>
                <div class='rightColumn'>right</div>
        </div>
    </div>
    <div class='footerBar'><div class='wrap'>footer</div></div>
</body>

和CSS：

div.mainContent { display: table; height: 100%;}
div.leftColumn { width: 20%; display: table-cell; background-color: #D2B48C; margin: 0; padding: 0;}
div.rightColumn {width: 20%; display: table-cell;}
div.center {width: 60%; display: table-cell;}
4

1 回答 1

4

尝试添加height: 200px;到 mainContent。

div.mainContent {
display: table;
height: 200px;
}

这是代码的jsFiddle。

添加height: 100%;也应该有效。

您的问题不是列没有拉伸到全高，而是 mainContent 没有完全拉伸。

--

编辑：好的，所以当你尝试让你的容器变得流畅时，真​​正的问题就来了，因为浏览器计算高度比计算宽度更难。

当您在父元素没有设置高度的元素上设置百分比高度时，就会出现问题。换句话说，父元素有一个默认高度：auto;。实际上，您是在要求浏览器根据未定义的值计算高度。由于这将等于一个空值，结果是浏览器什么都不做。

为了将 div 的高度定义为相对高度，您还必须设置父元素的高度。

通过添加height: 100%to .middle，您将获得接近您所追求的东西。请参阅此处的 jsFiddle。

在此处阅读有关高度问题的更多信息。

于 2012-12-17T05:57:15.207 回答