如何将页脚粘贴到屏幕底部并防止中间部分在页脚下方延伸？

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;
}