содержание минимальная высота 100% минус переменная высота навигатора/нижнего колонтитула

Question

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

Таким образом, мой навигатор и мой нижний колонтитул имеют переменную высоту. Я хочу, чтобы мой нижний колонтитул приклеился к основанию, и #content заполнить имеющееся вертикальное пространство между - даже если #navbar + #content + '#footer' фактическое пространство будет меньше высоты дисплея.

Поскольку я, к сожалению, не знаю, как я могу это сделать, я просто прошу без каких-либо репрессий, которые я могу представить - ну, я пробовал вещи немного без успеха: |

JSFiddle

Answer 1

Вот ваш основной Flexbox макет с вашими требованиями, прочтите комментарии в коде Fiddle и начать изучать flex'ing ваш сайт (ы) в Flexbox|Codrops CSS Reference

сниппете

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>

Answer 2

Вот самое простое решение 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/