2010-08-11 6 views
5

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

Antwort

0

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

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

5

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> 
+0

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