css 表上的 100% 高度答案

【问题标题】：100% height on css tablecss 表上的 100% 高度
【发布时间】：2014-10-10 16:34:18
【问题描述】：

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

<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;}

【问题讨论】：

标签： html css height css-tables

【解决方案1】：

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

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

Here is the jsFiddle 获取代码。

添加height: 100%; 也应该可以。

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

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

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

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

通过将height: 100% 添加到.middle，您将获得接近您所追求的东西。 See the jsFiddle here.

阅读更多关于身高问题here。

【讨论】：

不幸的是，height: 100% 不起作用（它会折叠到文本的高度）并且我不想使用固定高度（px），因为我希望设计能够动态调整自身大小基于屏幕尺寸。
是的，它有效吗？ jsfiddle.net/3NMw5/9 - 将高度 100% 添加到 mainContent。
您的工作有效，因为您在 div 上有静态高度属性。看看这个小提琴，这是我想要完成的，只是我想用流体高度属性替换 min-height: 300px 。 jsfiddle.net/3NMw5/10
我没有看到你在那个小提琴中所说的 min-height: 300px。
我有点没有选择比 :) 你可以将它们全部设为绝对位置并使用 javascript/jQuery 设置页脚的高度/位置 :)