Вот пример страницы:
http://jsfiddle.net/SkeLLLa/pwfH2/
Я хочу установить 100% высоты для класса content (см. комментарий «Здесь проблема» в исходном коде CSS), но когда я это делаю, левый и правый столбцы (вложенные в content div) становятся высотой 0px. Но когда content имеет высоту в пикселях, все работает нормально.
Есть ли решения без JavaScript?
Используйте display: inline-block для столбцов и height:100% для тегов html и body:
<!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>
padding-bottom:9999px; margin-bottom:-9999px;в левый и правый столбцы помогло. Спасибо! - person m03geek schedule 10.04.2012