內容最小高度100％減去可變的導航欄/頁腳高度

------------------------------- 
| #navbar      | 
|------------------------------- 
|        | 
|   #content    | 
| fill available vertical space | 
|        | 
|        | 
------------------------------- 
| #footer      | 
|-------------------------------

所以我的導航欄和頁腳的高度都是變化的。我希望我的頁腳粘在底部和#content填補之間的可用垂直空間 - 即使#navbar + #content +「#footer的」實際空間將小於顯示器的高度。內容最小高度100％減去可變的導航欄/頁腳高度

，因爲我已經可惜沒知道如何才能做到這一點，我只是要求沒有任何reults我可以介紹 - 好，我試過的東西了一下W/O任何成功：|

JSFiddle

來源

2015-11-22 Brettetete

我們可以請參閱您當前的HTML/CSS/JS設置？你可以在http://jsfiddle.net上設置它嗎？ – PavKR

檢查：http://stackoverflow.com/questions/33842180/css-how-to-fill-height-of-container，這裏有兩個方法可以幫助你'flexbox'和'表/表row' –

這裏是你的基本Flexbox的佈局符合您的要求，在代碼Fiddle閱讀註釋，並開始學習在Flexbox|Codrops CSS Reference

的flex'ing您的網站（）片段

html, body{ 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    margin: 0 auto     /* center body if max-width <100% */ 
 
} 
 

 
ul, li { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    display: inline 
 
} 
 

 
body{ 
 
    display: flex;     /* Enter flexbox layout */ 
 
    flex-direction: column;   /* a column of several rows */ 
 
    justify-content: space-between; /* moves header up, footer down*/ 
 
} 
 

 
.navbar { 
 
    background-color: cornflowerblue; 
 
} 
 

 
#footer { 
 
    min-height: 50px; 
 
    background-color: black; 
 
    color: rgba(255,255,255,0.87) /* MDL text white */ 
 
} 
 

 
#content { 
 
    flex: 1;  /* fill available space */ 
 
    background-color: cornsilk; 
 
}

<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="col-xs-12"> 
 
     <div class="container"> 
 

 
      <div class="navbar-collapse collapse" id="navbar-collapse"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li><a href="/cards">AAA</a></li> 
 
        <li><a href="/cards">BBB</a></li> 
 
        <li><a href="/cards">CCC</a></li> 
 
       </ul> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
</nav> 
 

 
<div id="content"></div> 
 

 
<footer id="footer"> 
 
    
 
    <div class="row"> 
 
     <div class="col-md4 col-xs-12">111</div> 
 
     <div class="col-md4 col-xs-12">222</div> 
 
     <div class="col-md4 col-xs-12">333</div> 
 
    </div> 
 
    
 
</footer>

來源

2015-11-22 01:13:45

-1

這是最簡單的jQuery的解決方案，解釋代碼：

jQuery(document).ready(function(){ 

var navHeight = $(".navbar").height(); // Get nav height 
var footerHeight = $("#footer").height(); // get footer height 
var windowHeight = $(window).height(); // get window height 
var content = $("#content"); 

    content.height(windowHeight - navHeight - footerHeight); // do math 
    console.log(content.height()); // for testing 

// Dont forget to call it on resize also 
$(window).resize(function() { 
    content.height(windowHeight - navHeight - footerHeight); 
}); 

});

的jsfiddle鏈接：http://jsfiddle.net/dumbuv59/4/

來源

2015-11-22 01:18:01

內容最小高度100％減去可變的導航欄/頁腳高度

回答

相關問題