सीएसएस डिवी 100% ऊंचाई

Question

मैं इस website विकसित कर रहा हूं और मैं सही साइडबार 100% ऊंचाई रखना चाहता हूं। Setting 100% height on an absolutely positioned element when the content expands past the window size:

body { 
    height: 100%; 
    min-height: 100%; 
    position: relative; 
} 

mydiv { 
    height: 100%; 
    min-height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 290px; 
} 

मैं जवाब का एक बहुत, विशेष रूप से इस (Prestaul जवाब) पढ़ा है।

लेकिन मेरे लिए यह चाल काम नहीं करती है, यहां तक ​​कि बेवकूफ उदाहरण काम नहीं करता है!

This is the jsfiddle working example.

This is the same code that doesn't work.

Answer 1

के शरीर शैली स्थापित करने का प्रयास करें:

body { position:relative;} 

यह मेरे

Answer 2

HTML टैग सेट भी। इस तरह कोई अजीब स्थिति हैक की आवश्यकता नहीं है।

html, body {height: 100%}

Answer 3

के लिए काम किया मैं एक सुझाव है। आप myDiv 100% की ऊंचाई करना चाहते हैं, तो आपके div पर इन अतिरिक्त 3 विशेषताओं का उपयोग:

myDiv { 
    min-height: 100%; 
    overflow-y: hidden; 
    position: relative; 
} 

यही काम करना चाहिए!

Answer 4

flexbox समाधान

नोट: फ्लेक्स विक्रेता उपसर्गों जोड़े यदि आपके supported browsers के लिए आवश्यक।

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    display: flex; 
 
} 
 

 
.Content { 
 
    flex-grow: 1; 
 
} 
 

 
.Sidebar { 
 
    width: 290px; 
 
    flex-shrink: 0; 
 
}

<div class="Content" style="background:#bed">Content</div> 
 
<div class="Sidebar" style="background:#8cc">Sidebar</div>