Come rendere la scala div al 100% della larghezza del browser?

Question

<div id="sidebar">sidebar</div> 
<div id="content">content</div> 

La barra laterale ha una larghezza fissa di 100 px. Come faccio a rendere la larghezza del contenuto al 100% della larghezza del browser?

http://jsfiddle.net/chickendance/qQQTU/1/

Answer 1

Si può fare questo con un semplice CSS:

#sidebar { 
    float: left; 
    width: 100px; 
} 

#content { 
    margin-left: 100px; 
} 

aggiornato con wrapper div:

HTML

<div id="wrapper"> 
    <p>wrapper</p> 
    <div id="sidebar">sidebar</div> 
    <div id="content">content</div> 
    <p>wrapper</p> 
</div> 

CSS

* { 
    /* reset */ 
    margin: 0; 
    padding: 0; 
} 
html, 
body { 
    /* for demo purposes only */ 
    height: 100%; 
} 
#wrapper { 
    /* for demo purposes only */ 
    background: rgba(200, 200, 200, 0.6); 
    height: 100%; 
} 
#sidebar { 
    float: left; 
    width: 100px; 

    /* for demo purposes only */ 
    background: rgba(200, 200, 200, 0.6); 
    height: 50%; 
} 
#content { 
    margin-left: 100px; 

    /* for demo purposes only */ 
    background: rgba(200, 200, 200, 0.9); 
    height: 50%; 
} 

esempio di lavoro: http://jsfiddle.net/kboucher/FK2tL/

Answer 2

Devi giocare con la larghezza%, proprio come il resto di noi:

#content { 
     background: green; 
     float: left; 
     width: 75%; 
    } 

Mi piacerebbe anche considerare l'aggiunta di un div genitore di larghezza: 100% secondo il modello di scatola.

Answer 3

basta cambiare le proprietà #content a questo:

#content { 
      background: green; 
      float: left; 
      width: 100%; 
      margin-right: -200px; 
     } 

quindi siamo impostazione della larghezza di 100% come richiedete, ma compensando la larghezza degli altri due div. Ho imparato questo trucco da CSS Zen Garden.