问题
Here is an example page:
http://jsfiddle.net/SkeLLLa/pwfH2/
I want to set 100% height for the content
class (see the "Problem here" comment in the CSS source), but when I do this left and right columns (nested in the content
div) become 0px
height. But when content
has height set in pixels it works fine.
Are there any solutions without JavaScript?
回答1:
Use display: inline-block
for the columns and height:100%
for the html
and body
tags:
<!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>
来源:https://stackoverflow.com/questions/10086007/css-3-column-height-100