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

Question

我一直在尝试将三列设置为主要内容区域的 100% 高度，顶部和底部有页眉和页脚。

期望的行为是:

• 当内容未占据屏幕时，页脚位于 屏幕底部，中间区域拉伸(stretch)以填充中间空间。
• 当内容超过屏幕时，页脚位于 内容的底部，而不是屏幕。

我最终选择了 table 和 table-cell solution ，但中间部分延伸到页脚下方 - 这会导致出现不必要的滚动条，请参阅:

https://jsfiddle.net/rwone/rqmrxfbp

有人问了类似的问题here .

相关 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

继续选择使用 display: table，我在其中添加了正确的标记而不是使用匿名表格元素。

将来人们不知道它们会如何呈现，所以我认为添加它们将确保它们按预期工作(并使其更容易阅读标记)。

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>

---

使用 flexbox 标记可以稍微清理一下

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>