Dreireihiges, tabellenloses CSS-Layout mit mittlerer Zeile, das den verbleibenden Platz ausfüllt

Was ich brauche, ist ein div mit pixelbasierter Höhe, das 3 Zeilen enthält. Die obere Reihe hat je nach Inhalt eine variable Höhe. Die untere Reihe hat eine feste Höhe. Die mittlere Zeile füllt den verbleibenden Platz. Alles ist 100% breit.Dreireihiges, tabellenloses CSS-Layout mit mittlerer Zeile, das den verbleibenden Platz ausfüllt

Ich habe mit dem Erstellen einer div und CSS-basierten Layout für Stunden, die mich buchstäblich Sekunden mit einer Tabelle zu tun hat kämpfen gekämpft. Ich habe viele Ansätze versucht, darunter negative untere Ränder, verschachtelte Divs, verschiedene Positionierungen, Höheneinstellungen, Anzeige: Tabelle, nichts bringt mich, was ich brauche. Ich habe diese Seite und das Internet durchsucht, habe meine Erinnerung an die verschiedenen Ansätze für flüssige Layouts aufgefrischt. Kein Erfolg.

Ich bin nicht besonders besorgt über die Kompatibilität mit "alten" Browsern wie IE6 (diese App ist nicht für "öffentliche" Verwendung). Es wäre großartig, dies in IE8 + FF + Chrome zum Laufen zu bringen.

Ich habe das Problem auf ein bloßes Beispiel unten veröffentlicht, zusammen mit dem Tabellen-basierten Layout zeigt, was ich will. Anmerkung: Ich mag CSS und tabellenloses Layout, aber manchmal scheint es einfach lächerlich, wie lange wir es durchhalten müssen, damit es funktioniert.

<!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>

In der Zwischenzeit konnte ich dies meinen Fortschritt nicht stoppen lassen, verbrachte schon zu viel Zeit. Ich gehe mit dem Tabellenlayout in meinem Projekt voran. Es ist einfach und erfüllt die Anforderungen, auch wenn die Puristen irgendwo heulen.

Vielen Dank für Anregungen - Ich bin vor allem neugierig, was die "richtige" Lösung zu diesem Zeitpunkt ist, ich hasse es, ratlos zu sein. Sicher, es ist machbar?

Quelle

2009-11-09 Joe Tan

Bearbeiteter Code, um einen roten Rand am mittleren div einzufügen, um zu betonen, dass das mittlere div den mittleren Bereich füllen sollte. –

Der Schlüssel zu Ihrem Problem ist anders an das Problem suchen - wenn Sie Google „sticky Footer“ Sie Lösungen wie die folgenden finden:

<!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;} 

.notbottom2 { 
    min-height: 100%; background-color:lightgreen; width: 100%; 
    height: auto !important; 
    height: 100%; 
} 

.mid2 {padding-bottom: 2em;} 
.top2 { width: 100%; background-color: pink;} 
.bottom2 { height: 2em; width: 100%; margin-top: -2em; background-color: lightblue; } 

</style> 
</head> 
<body> 
<div class="container"> 
<div class="notbottom2"> 
    <div class="top2">Top:<br/>Content-based<br/>Height</div> 
    <div class="mid2">Middle:<br/>Fill remaining space</div> 
</div> 
<div class="bottom2">Bottom: Fixed Height</div> 
</div> 
</body> 
</html>

EDIT: Es sollte das sein, was Sie wollen , mehr oder weniger.

Quelle

2009-11-09 20:21:25

Yup. In der Minute, als ich sah "die untere Reihe hat eine feste Höhe", ging mein Gehirn "klebrige Fußzeile! Klebrige Fußzeile!" :) Übrigens, wenn IE6 sich als Problem herausstellt, können Sie #container {min-height: 100%; position: relative;} verwenden und einen bedingten Kommentar verwenden, um #container {height: 100%;} an IE6 zu senden und darunter. – Martha

die höhe: auto! Wichtig; Höhe: 100%; ist ein alternativer Hack für den gleichen Zweck. IE6 bekommt nicht "! Wichtig", so dass die 100% überschrieben werden. Andere Browser, die Min-Height verstehen, verstehen das auch, wichtig, damit der Standardwert "Auto" vorherrscht. –

Zunächst einmal, vielen Dank für die schnellen Antworten! Das bekommt immer noch nicht ganz das, was ich brauche. Insbesondere die Anforderung "Die mittlere Zeile füllt den verbleibenden Platz". Wenn Sie "border: 3px solid red;" zu deiner Mid2-Klasse, ich denke, du wirst sehen, was ich meine. Ich suche nach einer Lösung, bei der das mittlere Div (Walters div.mid2) eine Höhe hat, die den Raum in der Mitte ausfüllt. Hoffnung, die Sinn macht? –

Dreireihiges, tabellenloses CSS-Layout mit mittlerer Zeile, das den verbleibenden Platz ausfüllt

Antwort

Verwandte Themen