100% ऊंचाई के साथ चिपचिपा पाद लेख और सामग्री

Question

मुझे चिपचिपा पाद लेख वाला एक पृष्ठ चाहिए जो स्क्रॉलबार हेडर ओवरलैप नहीं करता है, केवल शरीर। जैसे मैं this fiddle में करता हूं। लेकिन अब मैं चाहता हूं कि उस सामग्री (बिंदीदार बॉक्स) में शरीर की 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; 
    } 

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

Answer 1

आप व्यूपोर्ट ऊंचाई शून्य की .my_content से 100% सेट कर सकते हैं कर सकते हैं आपके पृष्ठ पर अन्य तत्वों की ऊंचाई और (लंबवत) पैडिंग (यानी हेडर ऊंचाई, पाद लेख ऊंचाई, .content-container पर शीर्ष और नीचे पैडिंग):

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

DEMO

अपने शीर्ष लेख और पाद चर ऊंचाइयों है, हालांकि इस काम नहीं करेगा।

Answer 2

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

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

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

और मैं html में कुछ परिवर्तन