layout CSS con piena navbar sinistra e intestazione

desidero avere il seguente schemalayout CSS con piena navbar sinistra e intestazione

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

quindi sostanzialmente un layout a due colonne con un'intestazione. Ho controllato molti generatori di layout CSS sulla rete, ma mi hanno appena prodotto un risultato in cui la barra di navigazione sinistra è grande quanto il contenuto in essa. Posso ridimensionarlo con "height: 500px" o qualsiasi altra cosa, ma voglio che sia completo (dall'alto verso il basso della finestra del browser) tutto il tempo. La modifica del valore con "height: 100%" non funziona. Se vuoi provarlo tu stesso: http://guidefordesign.com/css_generator.php e poi seleziona la pagina intera, il layout a due colonne, con l'intestazione per vedere cosa intendo. Se si vuole si può dirmi quale proprietà devo registrare nel file CSS generato per farlo funzionare

fonte

2010-08-11 Dave

Si potrebbe desiderare di avere uno sguardo e ottenere l'idea da:

Super Simple Two Column Layout

See the demo here.

fonte

2010-08-11 07:37:09 Sarfraz

Una piccola risposta generale: Guardate nei quadri CSS, come http://www.blueprintcss.org/ - questi consentono di definire le griglie.

Ecco una pagina di esempio: http://www.blueprintcss.org/tests/parts/sample.html

Per quanto riguarda il problema altezza, provare questo (dovrebbe dare il 100% di browser che l'altezza della finestra per il vostro div tutto il tempo):

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

fonte

2010-08-11 07:39:36 miku

A la soluzione che puoi provare è quella di dare all'area del contenuto un'immagine di sfondo che viene ripetuta verticalmente (altezza 1px e larghezza della pagina). Il lato sinistro di quell'immagine avrebbe il colore di sfondo del nav e il resto sarebbe il colore del colore di sfondo del contenuto ...

fonte

2010-08-11 07:53:28 Naruto

Puoi provare questo. Funziona con i browser che ho provato (Firefox, IE7 + 8, Opera, Safari, Chrome). Basta giocare con le unità percentuali per l'intestazione e le colonne.

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

fonte

2010-08-11 09:23:21 Sotiris

Buona risposta ma non si ha il controllo della proprietà 'height'. Semplicemente impostando 'width' e' float: left' fa il trucco. – beautifulcoder

layout CSS con piena navbar sinistra e intestazione

risposta

Problemi correlati