How to stick footer to bottom of screen and prevent middle section extending below footer?

Question

I've been trying to set three columns to 100% height of a main content area with a header and footer on the top and bottom.

The desired behavior is:

• When the content does not take up the screen, the footer is at the bottom of the screen, and the middle area stretches to fill the middle space.
• When the content takes up more than the screen, the footer is at the bottom of the content, not the screen.

I ended up going with the table and table-cell solution, but the middle section extends below the footer - which causes an unnecessary scrollbar to appear, see:

https://jsfiddle.net/rwone/rqmrxfbp

A similar question was asked here.

Relevant HTML

<div id="container">
    <div id="left_col"></div>
    <div id="main_content"></div>
    <div id="right_col"></div>
</div>
<div id="footer"></div>

CSS

#container {
    display: table;
    width: 100%;
    height: 100%;
}

#left_col {
    background: orange;
    display: table-cell;
    width: 15%;
}

#main_content {
    background: #ff0;
    display: table-cell;
}

#right_col {
    background: green;
    display: table-cell;
    width: 15%;
}

#footer {
    background: #3a3a3a;
    height: 200px;
    position: absolute;
    width: 100%;
    bottom: 0;
}

Answer 1

Continued on your choice to using display: table, where I added the proper markup instead of using anonymous table elements.

In the future one don't know how those might render so I think have them added will make sure they work as intended (and make it easier to read the markup).

html, body{
  height: 100%;
  margin: 0;
}
.tbl{
  display:table;
}
.row{
  display:table-row;
}
.row.expanded{
  height: 100%;
}
.cell{
  display:table-cell;
}
.container,
.content{
  width: 100%;
  height: 100%;
}
.header {
  background: #0099cc none repeat scroll 0 0;
  height: 75px;
}
.menu {
  border-bottom: 1px solid #555;
  border-top: 1px solid #555;
  background-color: #999;
  height: 0;
}
.footer {
  background: #3a3a3a;
  height: 75px;
}

#left_col {
  background: orange none repeat scroll 0 0;
  width: 15%;
}
#main_content {
  background: yellow none repeat scroll 0 0;
}

#right_col {
  background: green none repeat scroll 0 0;
  width: 15%;
}

ul#main_menu {
  margin: 0;
  padding: 0;
  text-align: center;
}
#main_menu li {
  border-right: 1px solid #555;
  display: inline-block;
  margin-right: -4px;    /* might need adjustment based on font size */
  width: 20%;
}
#main_menu li a {
  color: #fff;
  display: block;
  font-family: arial;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 24px;
  padding: 5px 0;
  text-decoration: none;
}

<div class="tbl container">
  <div class="row">
    <div class="cell header">
    </div>
  </div>
  <div class="row">
    <div class="cell menu">
      <ul id="main_menu">
        <li><a href="/">one</a></li><li><a href="/two.html">two</a></li><li><a href="/three.html">three</a></li><li><a href="/four.html">four</a></li><li><a href="/five.html">five</a></li>
      </ul>
    </div>
  </div>
  <div class="row expanded">
    <div class="cell">
      <div class="tbl content">
        <div class="row">
          <div id="left_col" class="cell">
            long content <br>long content <br>long content <br>long content <br>
            long content <br>long content <br>long content <br>long content <br>
            long content <br>long content <br>long content <br>long content <br>
            long content last
          </div>
          <div id="main_content" class="cell"></div>
          <div id="right_col" class="cell"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="cell footer">
    </div>
  </div>
</div>

---

With flexbox the markup can be cleaned up a little

html, body{
  margin: 0;
}
.flex{
  display:flex;
}
.flex.column {
  flex-direction: column
}
.flexitem{
}
.container{
  min-height: 100vh;
}
.header {
  background: #0099cc none repeat scroll 0 0;
  height: 75px;
}
.menu {
  border-bottom: 1px solid #555;
  border-top: 1px solid #555;
  background-color: #999;
}
.content,
#main_content{
  flex: 1;
}
.footer {
  background: #3a3a3a;
  height: 75px;
}

#left_col {
  background: orange none repeat scroll 0 0;
  width: 15%;
}
#main_content {
  background: yellow none repeat scroll 0 0;
}

#right_col {
  background: green none repeat scroll 0 0;
  width: 15%;
}

ul#main_menu {
  margin: 0;
  padding: 0;
  text-align: center;
}
#main_menu li {
  list-style-type: none;
  border-right: 1px solid #555;
  width: 20%;
}
#main_menu li a {
  color: #fff;
  display: block;
  font-family: arial;
  font-size: 15px;
  letter-spacing: 1px;
  line-height: 24px;
  padding: 5px 0;
  text-decoration: none;
}

<div class="flex column container">
  <div class="header">
  </div>
  <div class="menu">
    <ul id="main_menu" class="flex">
      <li><a href="/">one</a></li><li><a href="/two.html">two</a></li><li><a href="/three.html">three</a></li><li><a href="/four.html">four</a></li><li><a href="/five.html">five</a></li>
    </ul>
  </div>
  <div class="flex content">
    <div id="left_col">
      long content <br>long content <br>long content <br>long content <br>
      long content <br>long content <br>long content <br>long content <br>
      long content <br>long content <br>long content <br>long content <br>
      long content last
    </div>
    <div id="main_content"></div>
    <div id="right_col"></div>
  </div>
  <div class="footer">
  </div>
</div>

Answer 2

Hope this works.

#footer {
background: #3a3a3a;
height: 200px;
width: 100%;
position:absolute;
}