How To Stick Footer To Bottom Of Screen And Prevent Middle Section Extending Below Footer?

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 t

Solution 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 00;
  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 00;
  width: 15%;
}
#main_content {
  background: yellow none repeat scroll 00;
}

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

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

<divclass="tbl container"><divclass="row"><divclass="cell header"></div></div><divclass="row"><divclass="cell menu"><ulid="main_menu"><li><ahref="/">one</a></li><li><ahref="/two.html">two</a></li><li><ahref="/three.html">three</a></li><li><ahref="/four.html">four</a></li><li><ahref="/five.html">five</a></li></ul></div></div><divclass="row expanded"><divclass="cell"><divclass="tbl content"><divclass="row"><divid="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><divid="main_content"class="cell"></div><divid="right_col"class="cell"></div></div></div></div></div><divclass="row"><divclass="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 00;
  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 00;
  width: 15%;
}
#main_content {
  background: yellow none repeat scroll 00;
}

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

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

<divclass="flex column container"><divclass="header"></div><divclass="menu"><ulid="main_menu"class="flex"><li><ahref="/">one</a></li><li><ahref="/two.html">two</a></li><li><ahref="/three.html">three</a></li><li><ahref="/four.html">four</a></li><li><ahref="/five.html">five</a></li></ul></div><divclass="flex content"><divid="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><divid="main_content"></div><divid="right_col"></div></div><divclass="footer"></div></div>

Solution 2:

Hope this works.

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