CSS-Layout mit voller Größe linker Navigationsleiste und Header

Ich mag würde das folgende LayoutCSS-Layout mit voller Größe linker Navigationsleiste und Header

+++++++++++++++++++++++ 
+Header    + 
+++++++++++++++++++++++ 
+Nav+     + 
+ +     + 
+ +     + 
+ +  Content + 
+ +     + 
+++++++++++++++++++++++

so dass im Grunde ein zweispaltige Layout mit einem Header haben. Ich habe viele CSS-Layout-Generatoren im Netz überprüft, aber sie haben mir nur ein Ergebnis geliefert, bei dem die linke Navigationsleiste so groß ist wie der Inhalt darin. Ich kann es mit "height: 500px" oder was auch immer skalieren, aber ich möchte, dass es immer voll ist (von oben nach unten im Browserfenster). Ändern des Wertes mit "Höhe: 100%" funktioniert nicht. Wenn Sie es selbst ausprobieren möchten: http://guidefordesign.com/css_generator.php und dann ganze Seite, zwei Spaltenlayout, mit Header, um zu sehen, was ich meine. Wenn Sie möchten, können Sie mir sagen, welche Eigenschaft i in der generierten CSS-Datei einstellen müssen, um es

Quelle

2010-08-11 Dave

zu machen arbeiten Sie vielleicht einen Blick auf haben wollen und auf die Idee kommen aus:

Super Simple Two Column Layout

See the demo here.

Quelle

2010-08-11 07:37:09 Sarfraz

etwas allgemeine Antwort: Schauen Sie in CSS-Frameworks, wie http://www.blueprintcss.org/ - diese können Sie Gitter definieren.

Hier ist eine Beispielseite: http://www.blueprintcss.org/tests/parts/sample.html

bezüglich der Höhe Problem, versuchen, diese (Sie sollten 100% der Browser-Fensterhöhe für Ihre div die ganze Zeit geben):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <title>Test Page</title> 
    <style type="text/css"> 
    body { 
     padding: 0px; 
    } 
    .Container { 
     height: 100%; 
     width: 100%; 
     margin: 0px; 
     padding: 0px; 
     background-color: #123456; 
     color: black; 
    } 
    </style> 
</head> 
<body> 
    <div class="Container"> 
    </div> 
</body> 
</html>

Quelle

2010-08-11 07:39:36 miku

A Lösung, die Sie versuchen können, ist, dem Inhaltsbereich ein Hintergrundbild zu geben, das vertikal wiederholt wird (1px Höhe und Breite Ihrer Seite). Die linke Seite dieses Bildes hätte die Hintergrundfarbe des Hintergrunds, und der Rest wäre die Farbe der Hintergrundfarbe des Inhalts ...

Quelle

2010-08-11 07:53:28 Naruto

Sie können dies versuchen. Es funktioniert mit den Browsern, die ich getestet habe (Firefox, IE7 + 8, Opera, Safari, Chrome). Spielen Sie einfach mit den prozentualen Einheiten für Kopf und Spalten herum.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>for stackoverflow</title> 
    <style> 
    body, html { 
     padding : 0px; 
     margin : 0px; 
     height : 100%; 
    } 

    #wrapper { 
     width:900px; 
     height:100%; 
     margin: 0px; 
     padding: 0px; 
    } 

    #header { 
     height:10%; 
     background-color:#930; 
     width:900px; 
    } 

    #nav { 
     background-color:#999; 
     width:200px; 
     height:90%; 
     float:left; 
    } 

    #content { 
     height:90%; 
     background-color:#363; 
     width:700px; 
     float:left; 
    } 
    </style> 
</head> 

<body> 
<div id="wrapper"> 
    <div id="header"></div> 
    <div id="nav"></div> 
    <div id="content"></div> 
</div> 
</body>

Quelle

2010-08-11 09:23:21 Sotiris

Gute Antwort, aber Sie haben nicht die Kontrolle über die "Höhe" -Eigenschaft. Einfaches setzen der 'width' und' float: left' macht den Trick. – beautifulcoder

CSS-Layout mit voller Größe linker Navigationsleiste und Header

Antwort

Verwandte Themen