content minimum height 100% minus variable navbar / footer height

Question

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

So my navbar and my footer has a variable height. I want my footer sticked to the bottom and #content fill the available vertical space between - even if #navbar + #content + '#footer' actual space would be less than the display height.

Since I've unfortunately no idea how I can accomplish this I'm just asking without any reults I can present - well I tried stuff for a bit w/o any success :|

JSFiddle

Can we please see your current HTML/CSS/JS setup? Could you please set it up on http://jsfiddle.net? — PavKR, Nov 22 '15 at 00:40
Check this: http://stackoverflow.com/questions/33842180/css-how-to-fill-height-of-container , two methods here might help you `flexbox` and `table/table-row` — Mi-Creativity, Nov 22 '15 at 00:42

Rene van der Lende · Answer 1 · 2015-11-22T01:22:34.060

Here is your basic Flexbox Layout with your requirements, read the comments in the code Fiddle and start learning about flex'ing your site(s) at Flexbox|Codrops CSS Reference

The Snippet

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>

@verunar, thanks for the thumbs up! Should you experience problems with flexbox element sizes in IE11 use `flex-grow: 1` instead of the shorthand `flex: 1`, plus IE11 needs a width to work with. Nowadays I no longer use the shorthand, just to be sure. Furthermore: make sure the `footer.height` is at least `number of lines * line-height + padding Top/Bottom`, otherwise it will overflow and produce unwanted space below the footer (hair-pulling puzzle, I learned the hard way). Just so you know. Lastly: it's been almost 5 years since, learned a lot more, so comment here if you need more help! — Rene van der Lende, May 12 '20 at 02:13

score 1 · Answer 2 · answered Nov 28 '18 at 10:11

You Can Use 100vh Height

body {
    margin: 0;
}
.navbar {
    top: 0;
    left: 0;
    right: 0;
    padding: 15px;
    position: fixed;
    background: black;
    text-align: center;
}
.navbar ul {
    margin: 0;
    padding: 0;
}
.navbar ul li {
    display: inline-block;
}
.navbar ul li a {
    color: #ffffff;
    padding: 10px 25px;
    text-decoration: none;
}
/*//// content ////*/
.content {
    overflow: auto;
    background: #f8f8f8;
    margin: 48px 0 48px 0;
    height: calc(100vh - 96px);
}
.content h2 {
    margin: 0;
}
.content::-webkit-scrollbar {
    width: 8px;
    border-radius: 10px;
    background-color: #d9d9d9;
}
.content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: gray;
}
.content::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #d9d9d9;
}
/*//// footer ////*/
footer {
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    background: black;
    text-align: center;
    padding: 15px 15px;
}
footer p {
    margin: 0;
    color: #ffffff;
}

<nav class="navbar">
    <ul>
        <li><a href="javascript:">Home</a></li>
        <li><a href="javascript:">About</a></li>
        <li><a href="javascript:">Gallery</a></li>
        <li><a href="javascript:">Services</a></li>
        <li><a href="javascript:">Contact</a></li>
    </ul>
</nav>
<div class="content">
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
    <h2>Hello World</h2>
</div>
<footer>
    <p>Copy Right</p>
</footer>

score 0 · Answer 3 · answered Nov 22 '15 at 01:18

Here is the most simple jQuery solution, explanation is in the code:

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 link: http://jsfiddle.net/dumbuv59/4/

content minimum height 100% minus variable navbar / footer height

3 Answers3