100% ऊंचाई के साथ चिपचिपा पाद लेख और सामग्री - एचटीएमएल, सीएसएस, एचटीएमएल 5, सीएसएस 3, चिपचिपा-पाद लेख

मुझे चिपचिपा पाद लेख वाला पृष्ठ चाहिए, जो स्क्रॉलबार हेडर को ओवरलैप नहीं करता, केवल शरीर। जैसे मैं करता हूं यह मूर्ख। लेकिन अब मैं चाहता हूं कि सामग्री (बिंदीदार बॉक्स) में शरीर की ऊंचाई 100% हो।

एचटीएमएल

<div class="navbar navbar-inverse navbar-fixed-top"></div>
<div class="container">
<div class="content-container">
<div class="my_content">Full height ??</div>
<div class="push"></div>
</div>
<div class="footer"></div>
</div>

सीएसएस

html,
body {
height: 100%;
overflow: hidden;
}

body {
padding-top: 50px;
}

.container {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}

.content-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
position: relative;
padding-top: 15px;
padding-bottom: 15px;
min-height: 100%;
margin-bottom: -60px;
}

.footer {
position: relative;
width: 100%;
background-color: red;
}

.footer,
.push {
height: 60px;
}

.my_content {
border: 1px dotted;
width: 100%;
height: 100%;
min-height: 200px;
min-width: 300px;
}

आप चिपचिपे पाद का उपयोग करने के लिए किसी अन्य टेम्पलेट का सुझाव दे सकते हैं।

उत्तर:

आप सेट कर सकते हैं .my_content व्यूपोर्ट ऊंचाई की 100% ऊंचाई अन्य तत्वों की ऊंचाई और (ऊर्ध्वाधर) पैडिंग (यानी हेडर ऊंचाई, फुटर ऊंचाई, ऊपर और नीचे की पैडिंग) .content-container) आपके पेज पर ऐसा है:

.my_content {
min-height: calc(100vh - 140px);
}

डेमो

यदि आपके हेडर और फुटर में परिवर्तनशील ऊंचाइयां हैं, तो यह "टी वर्क" है।

चिपचिपा पाद लेख के लिए इस उदाहरण का उपयोग करें यह हेडर को ओवरलैप नहीं करता है

http://jsfiddle.net/0dbg9ko2/12/

.footer {
position: fixed;
bottom:0;
left:0;
background-color: red;
}

और मैं HTML में कुछ बदलाव कर सकता हूं