div scale को 100% ब्राउज़र चौड़ाई कैसे बनाएं?

Question

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

साइडबार 100px की एक निश्चित चौड़ाई है। मैं ब्राउज़र की चौड़ाई के 100% तक सामग्री की चौड़ाई कैसे बना सकता हूं?

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

Answer 1

आप सरल सीएसएस के साथ ऐसा कर सकते हैं:

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

#content { 
    margin-left: 100px; 
} 

wrapper div के साथ अपडेट किया गया:

एचटीएमएल

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

सीएसएस

* { 
    /* 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%; 
} 

कार्य उदाहरण: http://jsfiddle.net/kboucher/FK2tL/

Answer 2

तुम सिर्फ हम में से बाकी की तरह चौड़ाई% के साथ खेलने के लिए है:

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

मैं भी एक जोड़ने पर विचार करता हूँ चौड़ाई के पैरेंट div: बॉक्स मॉडल के अनुसार 100%।

Answer 3

बस इस के लिए अपने #content गुणों को बदलने:

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

तो हम 100% चौड़ाई सेट कर रहे हैं के रूप में आप की आवश्यकता होती है, लेकिन अन्य दो DIVs की चौड़ाई offsetting। मैंने इस चाल को CSS Zen Garden से सीखा।