Мне нужен элемент div с высотой в пикселях, содержащий 3 строки. Верхний ряд имеет переменную высоту в зависимости от содержимого. Нижний ряд имеет фиксированную высоту. Средний ряд заполняет все оставшееся пространство. Все ширина 100%.
Я боролся с созданием div и макета на основе CSS в течение нескольких часов, что буквально секунд заняло использование таблицы. Я перепробовал много подходов, включая отрицательные нижние поля, вложенные элементы div, различные положения, настройки высоты, отображение: таблица, ничто не дает мне то, что мне нужно. Я искал этот сайт и Интернет, обновил мою память о различных подходах для жидких макетов. Безрезультатно.
Меня не особо беспокоит совместимость со "старыми" браузерами, такими как IE6 (это приложение не для "публичного" использования). Просто заставить работать это в IE8 + FF + Chrome.
Я сократил проблему до приведенного ниже голого примера вместе с табличным макетом, показывающим, что я хочу. Sidenote: Мне нравится CSS и макет без таблиц, но иногда это просто кажется нелепым из-за того, что нам приходится проходить через него.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.container {width:500px;height:200px;border:1px solid black;background-color:#c0c0c0;position:relative;}
/* Styles for colors */
#top td, .top {width:100%;background-color:pink;}
#mid td, .mid {width:100%;background-color:lightgreen;border:1px solid red;}
#bot td, .bot {width:100%;background-color:lightblue;}
/* Styles for Table-based Layout */
#layout {width:100%;height:100%;border-collapse:collapse;}
#layout td {vertical-align:top;padding:0px;}
#top td {}
#mid td {height:100%;}
#bot td {height:2em;}
/* Styles for Table-less Layout */
.top {}
.mid {}
.bot {height:2em;position:absolute;bottom:0px;}
</style>
</head>
<body>
Layout I want (with tables):
<div class="container">
<table id="layout">
<tr id="top"><td>Top:<br/>Content-based<br/>Height</td></tr>
<tr id="mid"><td>Middle:<br/>Fill remaining space</td></tr>
<tr id="bot"><td>Bottom: Fixed Height</td></tr>
</table>
</div>
<hr/>
Best I can get with CSS:
<div class="container">
<div class="top">Top:<br/>Content-based<br/>Height</div>
<div class="mid">Middle:<br/>Fill remaining space</div>
<div class="bot">Bottom: Fixed Height</div>
</div>
</body>
</html>
Между тем, я не мог позволить этому остановить мой прогресс, слишком много времени уже провел. Я иду вперед с макетом таблицы в моем проекте. Это просто и полностью удовлетворяет требованиям, даже если пуристы где-то вопят.
Спасибо за любые предложения - мне в основном любопытно, каково «правильное» решение на данный момент, я ненавижу быть в тупике. Конечно, это выполнимо?