Question

我正在尝试制作一个没有固定高度或宽度元素的流畅布局。我的页面正文分为三列（因为我希望它们都是相同的高度，所以我决定使用css表）。但是，当我尝试向表格div（或表格单元格div）添加100％高度属性时，它们不会扩展到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;}

Answer 1

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

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

Here is the jsFiddle代码。

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

你的问题不在于柱子没有伸展到全高，而是主要内容没有完全拉伸。

-

编辑：好的，所以当您尝试使容器变得流畅时会出现真正的问题，因为浏览器计算的高度比宽度更难。

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

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

通过将height: 100%添加到.middle，您可以获得与之相近的内容。 See the jsFiddle here

详细了解身高问题here。

css表上100％高度

1 个答案: