2011-02-02 16 views
5

तक खींचने के लिए कैसे प्राप्त करें मुझे इसे प्राप्त करने में कठिनाई हो रही है। मैं एक सेट न्यूनतम ऊंचाई के साथ खिड़की में लंबवत शेष स्थान को भरने के लिए div content1 और content2 पसंद करूंगा।सीएसएस div को 100% विंडो

<style type="text/css"> 
body,td,th { 
    font-family: Arial, Helvetica, sans-serif; 
    height:100%; 
} 
body { 
    background-color: #E1E1E1; 
} 
</style> 
<style type="text/css"> 
.container { 
    width: 965px; 
    height: 100%; 
    margin: 0 auto; 
    overflow: hidden; 
} 
.sidebar1 { 
    float: left; 
    width: 200px; 
    background: none; 
    padding-bottom: 10px; 
} .content { 
    padding: 10px 0; 
    width: 380px; 
    height: 100%; 
    background: #fff; 
    float: left; 
    position: relative; 
} .content2 { 
    float: left; 
    width: 380px; 
    height: 100%; 
    background: #fff; 
    padding: 10px 0; 
} 
--> 
</style> 

यहाँ divs मैं आकार बदलने के लिए कोशिश कर रहा हूँ कर रहे हैं (वर्तमान में खाली है, लेकिन मैं उन्हें पसंद खड़ी खिड़की को भरने के लिए होगा):

<div class="content" style="border-left: solid 1px #CCC;"></div> 
<div class="content2"><!-- end .sidebar2 --></div> 

उत्तर

16

आप के रूप में HTML टैग पर 100% ऊंचाई की जरूरत है अच्छी तरह से

html { height: 100%; } 

देखें: http://jsfiddle.net/wJ73v/

+0

अपने – methuselah

+2

:-(काम कर यह मैं सिर्फ सभी ब्राउज़रों पर यह परीक्षण किया – Mahima

+0

@jeansymolanza काम करेंगे, jsfiddle मैं एक डेमो के लिए जोड़ा दिखाई नहीं दे रहा। – Petah

3
<!DOCTYPE html> 
<html> 
    <head> 
     <title>Foo</title> 
     <style> 
      html {height: 100%;} 
      body {height: 100%; margin: 0; padding: 0;} 
      div {border: 1px solid #000; height: 100%; float: left;} 
     </style> 
    </head> 
    <body> 
     <div id="foo">a</div> 
     <div id="bar">b</div> 
    </body> 
</html> 

उचित डॉक्टरेट आवश्यक है, मुझे लगता है, क्योंकि अन्यथा ब्राउजर तथाकथित क्विर्क मोड पर जाते हैं।

संबंधित मुद्दे