Układ CSS z pełnym rozmiarze lewym pasku nawigacyjnym i cel

chciałbym mieć następujący układUkład CSS z pełnym rozmiarze lewym pasku nawigacyjnym i cel

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

więc w zasadzie dwa układ kolumn z cel. Sprawdziłem wiele generatorów układów CSS w sieci, ale właśnie dali mi wynik, gdy lewy pasek nawigacyjny jest tak duży, jak zawartość. Mogę skalować go za pomocą "height: 500px" lub cokolwiek innego, ale chcę, aby cały czas był pełnowymiarowy (od góry do dołu okna przeglądarki). Zmiana wartości na "wysokość: 100%" nie działa. Jeśli chcesz wypróbować to sam: http://guidefordesign.com/css_generator.php, a następnie wybierz pełną stronę, układ dwóch kolumn, z nagłówkiem, aby zobaczyć co mam na myśli. Jeśli chcesz, możesz mi powiedzieć, która nieruchomość muszę ustawić w generowanym pliku css, aby to działało

Źródło

2010-08-11 Dave

Czasami warto spojrzeć i pomysł z:

Super Simple Two Column Layout

See the demo here.

Źródło

2010-08-11 07:37:09 Sarfraz

trochę ogólna odpowiedź: Spójrz w ramach CSS, jak http://www.blueprintcss.org/ - te pozwalają określić siatek.

Oto przykładowa strona: http://www.blueprintcss.org/tests/parts/sample.html

Odnośnie problemu wysokość, wypróbować ten (powinno dać 100% przeglądarki wysokości okna do div cały czas):

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

Źródło

2010-08-11 07:39:36 miku

A rozwiązaniem, które można wypróbować, jest nadanie obszarowi treści obrazu tła, który jest powtarzany w pionie (wysokość i szerokość strony 1px). Lewa strona tego obrazu miałaby kolor tła nav, a reszta byłaby kolorem koloru tła treści ...

Źródło

2010-08-11 07:53:28 Naruto

Możesz spróbować. Działa na przeglądanych przeze mnie przeglądarkach (Firefox, IE7 + 8, Opera, Safari, Chrome). Po prostu baw się z jednostkami procentowymi dla nagłówka i kolumn.

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

Źródło

2010-08-11 09:23:21 Sotiris

Dobra odpowiedź, ale nie masz kontroli nad właściwością 'height'. Po prostu ustawienie 'width' i' float: left' rozwiązuje problem. – beautifulcoder

Układ CSS z pełnym rozmiarze lewym pasku nawigacyjnym i cel

Odpowiedz

Powiązane problemy