这是一个示例页面:
http://jsfiddle.net/SkeLLLa/pwfH2/
我想为 content 类设置 100% 的高度(参见 CSS 源代码中的“这里的问题”注释)，但是当我这样做时，左右两列(嵌套在 content div) 变为 0px 高度。但是当 content 以像素为单位设置高度时，它工作正常。
有没有不用 JavaScript 的解决方案？
最佳答案
对列使用 display: inline-block，对 html 和 body 使用 height:100%标签:
<!doctype html>
<html>
<head>
<style>
html, body, #content, #left, #right, #center { height: 100%; }
#content { width: 100%; }
#left, #center, #right { display:inline-block; }
#left, #center, #right { width: 32%; border: 1px solid red; }
/* media query for IE 6-7 */
@media,
{
#left, #center, #right { display:inline; }
}
</style>
</head>
<body>
<div id="content">
<div id="left">foo</div>
<div id="center">bar</div>
<div id="right">baz</div>
</div>
</body>
</html>关于html - CSS:3 列高度 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10086007/