मैं div को अपने मूल तत्व को लंबवत रूप से कैसे भरूं?

Question

मैं #main लंबवत (और #content की ऊंचाई से मेल खाने के लिए) प्राप्त करने की कोशिश कर रहा हूं। मैं यह कैसे करु?

Here's my jsFiddle।

सीएसएस:

#main { 
    border: solid green 2px; 
} 

#sidebar { 
    background-color: red; 
    width: 20%; 
    overflow: auto; 
    float: left; 
    height: 100%; 
} 

#content { 
    background-color: orange; 
    width: 80%; 
    overflow: auto; 
    float: left; 
    height: 100%; 
} 

#main-footer { 
    clear: both; 
}​ 

और एचटीएमएल:

<div id="main"> 

<div id="sidebar"> 
    <ul> 
     <li>abc</li> 
     <li>def</li> 
    </ul> 
</div> 

<div id="content"> 
defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad sfljsf sadfjsldfj sakfj;alsdfj dfsjsadfl;j asdlfjl;asdfj 
defsdfasdfasd fjasd;lf jasdl;fkjasd; lfjas; lfkjadsfl;sdajfs dlfjsdlfksjflaskfjsdaljfasdl asdfsad sfljsf sadfjsldfj sakfj;alsdfj dfsjsadfl;j asdlfjl;asdfj 
</div> 

<div id="main-footer"> 
</div> 

</div>​ 

Answer 1

div ऊंचाई की स्थापना के बिना स्पष्ट रूप से यह एक छोटे मुश्किल है। Here is one solution।

Answer 2

div एक कंटेनर है। यह इसकी सामग्री को ऊपर उठाने वाली ऊंचाई को उठाएगा। आप जो चाहते हैं उसे प्राप्त करने का एकमात्र तरीका पीएक्स में ऊंचाई का उपयोग करना है। यदि आपको अर्थपूर्ण मार्कअप की परवाह नहीं है (मैं आपको सलाह देता हूं) तो सितंबरम्बरब्रेन का लिंक एक अच्छी चाल है।

Answer 3

2017 समाधान: मेरे लिए यह flexbox के साथ अच्छी तरह से काम किया। यदि सामग्री खिड़की की ऊंचाई से छोटी होनी चाहिए तो मुझे पूर्ण विंडो ऊंचाई पर खींचने के लिए पृष्ठ सामग्री की आवश्यकता होती है।

 html, 
     body{ 
     min-height: 100%; 
     display: box; 
     display: flexbox; 
     display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ 
     display: -ms-flexbox; /* TWEENER - IE 10 */ 
     display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10*/ 
     display: -moz-box; 
     display: flex; 
     -webkit-box-orient:vertical; 
     -moz-box-orient: vertical; 
     box-orient: vertical; 
     -webkit-box-direction:normal; 
     -webkit-flex-direction:column; 
     -ms-flexbox-direction:column; 
     -ms-flex-direction: column; 
     flex-direction:column; 
     } 
     body{ 
     -webkit-box-flex: 1; 
     -webkit-flex: 1 1; 
     -ms-flex: 1 1; 
     flex: 1 1; 
     } 
     #page{ 
     -webkit-box-flex: 100; 
     -webkit-flex: 100 100; 
     -ms-flex: 100 100; 
     flex: 100 100; 
     } 
     footer{ 
     -webkit-box-flex: 1; 
     -webkit-flex: 1 1; 
     -ms-flex: 1 1; 
     flex: 1 1; 

     -ms-flex-preferred-size: 300px; 
     -webkit-flex-basis: 300px; 
     flex-basis: 300px; 
     } 
     @media only screen and (max-width:500px) { 
     footer{ 
      -ms-flex-preferred-size: 400px; 
      -webkit-flex-basis: 400px; 
      flex-basis: 400px; 
     } 
     } 

Answer 4

#sidebar और #content और जोड़ने display:flex से निकाला जा रहा है ऊंचाइयों #main के चाल करना चाहिए। यानी

#main { 
    border: solid green 2px; 
    display: flex; 
} 

#sidebar { 
    background-color: red; 
    width: 20%; 
    float: left; 
} 

#content { 
    background-color: orange; 
    width: 80%; 
    float: left; 
} 

See JSFiddle.