Potrzebuję elementu div o wysokości w pikselach zawierającej 3 wiersze. Górny rząd ma zmienną wysokość w zależności od zawartości. Dolny rząd ma stałą wysokość. Środkowy rząd wypełnia pozostałą przestrzeń. Wszystko ma szerokość 100%.Trzy-rzędowy, bez tabeli, układ CSS z wierszem środkowym, który wypełnia pozostałą przestrzeń.
mam zmaga się z budowy i układ div CSS oparte na wiele godzin, że zabiera mnie dosłownie sekund zrobić przy użyciu tabeli. Próbowałem wielu podejść, w tym negatywne marginesy dolne, zagnieżdżanie divów, różne pozycje, ustawienia wysokości, wyświetlanie: tabela, nic nie dostaje mi tego, czego potrzebuję. Przeszukałem tę stronę i Internet, odświeżyłem moją pamięć różnych podejść do płynnych układów. Bez skutku.
Nie martwię się szczególnie o zgodność ze "starymi" przeglądarkami, takimi jak IE6 (ta aplikacja nie jest przeznaczona do użytku publicznego). Uruchomienie tego w IE8 + FF + Chrome byłoby wspaniałe.
Usunąłem problem do gołego przykładu zamieszczonego poniżej, wraz z układem tabeli pokazującym, czego chcę. Sidenote: Uwielbiam CSS i układ bez stołów, ale czasami wydaje się absurdem długości, przez które musimy przejść, aby to zadziałało.
<!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>
Tymczasem nie mogłem pozwolić, aby to powstrzymało mój postęp, spędziłem już zbyt dużo czasu. Idę naprzód z układem tabeli w moim projekcie. To proste i całkowicie spełnia wymagania, nawet jeśli puryści skandują gdzieś.
Dzięki za wszelkie sugestie - jestem głównie ciekawy, jakie jest "właściwe" rozwiązanie w tym momencie, nienawidzę bycia zakłopotanym. Z pewnością jest to wykonalne?
Zmieniono kod tak, aby zawierał czerwoną ramkę na środku div, aby podkreślić, że środkowy element div powinien wypełnić środkowy obszar. –