barra laterale fissa con altezza 100% in CSS

sto facendo una barra laterale fissa che ho deciso here in stack overflow, così ora ho una barra fissa con questo codice:barra laterale fissa con altezza 100% in CSS

<div id="main" style="width:100%;background:red;"> 
    <div id="sidemenu" style="float:left;height:200px;background:#000;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:200px;overflow-y:scroll;background:silver;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div>

Ha un'altezza di 200px (solo per vedere come funziona), ma la barra laterale di cui ho bisogno deve avere un'altezza del 100% per tutto il tempo. Ho visto vari post qui in StackOverflow che dicono che le colonne faux sono un'opzione: http://www.alistapart.com/articles/fauxcolumns/. Ma all'interno del mio <div id="sidebar"> avrò, in alcuni casi, altri 2 DIV: #menu e #submenu, quindi la larghezza varierà.

Cosa posso fare? Non ho bisogno di supporto per i vecchi browser: IE9, l'ultimo Chrome e l'ultimo Firefox è OK.

fonte

2011-11-03 udexter

Aggiungerei uno border-left al corpo, ottenere la voce di menu più lunga e abbinare la sua larghezza in ems, quindi impostare un margine negativo sul sidemenu. Poi ti sembrano corrispondere qualsiasi altezza del contenuto div occupa (o se lo si imposta in modo esplicito, o se il contenuto si espande):

<body style="border-left: 10em solid #666;"> 

<div id="main" style="background:red;"> 
    <div id="sidemenu" style="float:left;margin-left: -10em;width:10em;background:#666;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     very long menu item<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:400px;background:silver;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div> 

</body>

Per una barra laterale con uno sfondo con texture (un metodo), si potrebbe impostare la larghezza in pixel in base alla larghezza della texture (non flessibile come lo SME, ma se impostato alla voce più ampia, dovrebbe essere a posto) e le ripetizioni di texture lungo l'asse y:

<div id="main" style="background: url(pattern_157.gif) repeat-y;"> 
    <div id="sidemenu" style="float:left;width:200px;background: transparent;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     very long menu item<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:600px;background:transparent;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div>

fonte

2011-11-03 09:50:31

hey @Dave! Questa è una buona soluzione ma ... cosa succede se il sidemenu ha un'immagine di sfondo (una trama) come lo risolverete? Grazie in anticipo! – udexter

@udexter - un esempio aggiunto alla risposta sopra - ci sono diversi modi per farlo, ma questo è stato il primo che mi è venuto in mente ... –

è il problema che lo sfondo della colonna ha una sorta di gradiente? Se è solo a tinta unita, non puoi lasciare la larghezza delle 2 colonne non impostate e affiancare l'immagine di sfondo sull'asse x e sull'asse y?

fonte

2011-11-03 09:52:54 Brighty

sì, ha una trama allegata – udexter

Che ne dici se hai fatto la tua immagine con texture 9000px wide, ma metti il contenuto div a un indice z più alto rispetto al sidemenu div? – Brighty

Ecco un'altra idea per questo utilizzando il posizionamento fisso e l'altezza del 100%. Metto anche abbastanza pause per mostrare come il contenuto scorrerà, ma la barra laterale e il suo contenuto rimarranno dove sono.

<body style="margin:0;"> 
    <div id="main"> 
     <div id="sidemenu" style="width:200px; position:fixed; height:100%; background: url(http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_1.jpg) repeat;"> 
      menu<br /> 
      menu<br /> 
      menu<br /> 
      very long menu item<br /> 
      menu<br /> 
      menu<br /> 
     </div> 
     <div id="content" style="background:transparent; float:left; margin:0 0 0 220px;"> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
     </div> 
    </div> 
</body>

fonte

2012-07-02 15:57:31

barra laterale fissa con altezza 100% in CSS

risposta

Problemi correlati