बूटस्ट्रैप - हेडर और पाद लेख के बीच तरल पदार्थ कंटेनर भरें

Question

यह एक बहुत ही सरल सवाल हो सकता है, लेकिन मैं थोड़ी देर के लिए सीएसएस दृश्य से बाहर हूं और मुझे यह पता लगाना प्रतीत नहीं होता है। मैं बूटस्ट्रैप ढांचे का उपयोग कर रहा हूं और मेरे पास एक निश्चित हेडर और पाद लेख है। बीच में कंटेनर में एक navbar और सामग्री क्षेत्र शामिल है। मैं उस कंटेनर को हेडर और पाद लेख के बीच पूरी जगह (100% ऊंचाई) भरना चाहता हूं।

यहाँ परियोजना की jsFiddle है: http://jsfiddle.net/NyXkt/2/

यह वर्तमान एचटीएमएल संरचना होती है:

<div id="wrapper"> 
    <!-- Header --> 
    <div class="container-fluid no-padding header"> 
     <div class="row-fluid fill-height"> 
      <!-- Header Left --> 
      <div class="span2"> 
       <p class="center-text">Left</p> 
      </div> 
      <!-- Header Middle --> 
      <div class="span8"> 
       <p class="center-text">Middle</p> 
      </div> 
      <!-- Header Right --> 
      <div class="span2"> 
       <p class="center-text">Right</p> 
      </div> 
     </div> 
    </div> 
    <!-- Content Wrapper --> 
    <div class="container-fluid no-padding fill"> 
     <div class="row-fluid"> 
      <div class="span2"> 
       <div class="well sidebar-nav-fixed no-padding"> 
        <ul id="nav"> 
         <li><a href="#">Item 1</a> 

          <ul> 
           <li><a href="#">Sub-Item 1 a</a> 
           </li> 
           <li><a href="#">Sub-Item 1 b</a> 
           </li> 
           <li><a href="#">Sub-Item 1 c</a> 
           </li> 
          </ul> 
         </li> 
         <li><a href="#">Item 2</a> 

          <ul> 
           <li><a href="#">Sub-Item 2 a</a> 
           </li> 
           <li><a href="#">Sub-Item 2 b</a> 
           </li> 
          </ul> 
         </li> 
         <li><a href="#">Item 3</a> 

          <ul> 
           <li><a href="#">Sub-Item 3 a</a> 
           </li> 
           <li><a href="#">Sub-Item 3 b</a> 
           </li> 
           <li><a href="#">Sub-Item 3 c</a> 
           </li> 
           <li><a href="#">Sub-Item 3 d</a> 
           </li> 
          </ul> 
         </li> 
         <li><a href="#">Item 4</a> 

          <ul> 
           <li><a href="#">Sub-Item 4 a</a> 
           </li> 
           <li><a href="#">Sub-Item 4 b</a> 
           </li> 
           <li><a href="#">Sub-Item 4 c</a> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </div> 
      <div class="span10"> 
       <p class="center-text">Content</p> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- Footer --> 
<div id="footer"> 
    <div class="container-fluid"> 
     <p class="center-text">Footer</p> 
    </div> 
</div> 

किसी को समझा सकता है अगर मैं या एक उदाहरण के लिए मुझे बात मैं क्या करने की आवश्यकता हो सकती है क्या, डी इसकी सराहना करते हैं।

Answer 1

किसी भी मूल कंटेनर को भी 100% ऊंचाई (एचटीएमएल, बॉडी और # रैपर) होना चाहिए। यदि आप # रैपर {ऊंचाई: 100%} बनाते हैं और अपने कंटेनर में 'भरने वाली ऊंचाई' जोड़ते हैं तो इसे काम करना चाहिए। यहाँ देखें:

http://jsfiddle.net/skelly/NyXkt/4/

#wrapper { 
    min-height: 100% !important; 
    height: 100% !important; 
    margin: 0 auto -33px; 
}