Wie kann ich ein Randlayout mit CSS erstellen?

Question

Ich möchte ein Rahmenlayout für eine Webanwendung erstellen, in dem Kopf- und Fußzeilen fester Größe, eine Seitenleiste und der Inhalt einer Hauptzentrale enthalten sind, der den verbleibenden Platz ausfüllt. Stellen Sie sich vor, dass es sich um einen Browser handelt, bei dem die Symbolleisten und die Statusleiste eine feste Größe haben, die Seitenleiste die Größe ändern kann, aber die Website in der Mitte erweitert wird, um die verbleibende Größe zu füllen.

bearbeiten: Um zu verdeutlichen, möchte ich die Höhe des gesamten Designs in Pixel angeben, zum Beispiel 600px. Dann möchte ich, dass die Seitenleiste und die mittleren divs nach unten expandieren, um den verfügbaren Platz zu füllen, selbst wenn ihr Inhalt nicht groß genug ist, um den Platz zu füllen. Die Webbrowser-Analogie kann auch hier verwendet werden. Auch wenn die Seite, die Sie im Browser betrachten, nicht größer als das Browserfenster ist, wird die Größe des Browsers nicht geändert.

Gibt es eine Möglichkeit, dies in CSS zu tun?

Answer 1

Die Methode, die Sie klingt wie ein Job für Fußzeile Stick beziehen - das ist schon alt, arbeitet aber nach wie vor einen Zauber ... the man in blue - footerStickAlt

Similar question here.

Und ich bin sicher, wenn Sie das gleiche verwenden Kriterien in dieser Frage und die damit verbundene Frage, um eine Suche zu starten, werden Sie mit mehr kommen.

Answer 2

try Flexbox, arbeitet mit Firefox und Webkit

http://www.html5rocks.com/en/tutorials/flexbox/quick/

die aktuelle Implementierung nicht aktualisiert wird, aber es ist gut genug

aber Sie können dies wahrscheinlich tun mit Tabellen (, die ähnlich die Flexbox)

hoffe, das hilft

Answer 3

div { border : 1px solid #d3d3e3 } 

#north { margin:0; padding:1em; }   
#south { margin:0; padding:1em; }   
#east  { margin:0; padding:1em; width:6em; height:22em; float:left; margin-right:1.1em }   
#west  { margin:0; padding:1em; width:6em; height:22em; float:right; margin-left:1.1em }   
#center { margin:0; padding:1em; padding-bottom:0em; }   
#center:after { content:' '; clear:both; display:block; height:0; overflow:hidden } 

<div id="north">North</div > 
<div id="east">East</div> 
<div id="west">West</div> 
<div id="center">Center</div> 
<div id="south">South</div> 

Live-Link: http://jsfiddle.net/marrok/dGw6K/2/

Answer 4

Das CSS-Tabellenlayout kann damit gut umgehen.

.borderLayout { 
    display: table; 
    width: 100% 
} 

.borderLayout .top { 
    display: table-row; 
} 

.borderLayout .left { 
    display: table-cell; 
    vertical-align: middle; 
    width: 10%; 
    } 

.borderLayout .center { 
    display: table-cell; 
    vertical-align: middle; 
} 

.borderLayout .right { 
    display: table-cell; 
    vertical-align: middle; 
    width: 10%; 
    } 

.borderLayout .bottom { 
    display: table-row; 
} 

JSFiddle