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

debugcn 发表于 Dev

用户名

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

所需的行为是：

当内容不占用屏幕时，页脚位于屏幕底部，中间区域会拉伸以填充中间空间。
当内容占据的内容比屏幕多时，页脚位于内容的底部，而不是屏幕的底部。

我最后使用table和table-cell 解决方案，但是中间部分在页脚下方延伸-这导致不必要的滚动条出现，请参阅：

https://jsfiddle.net/rwone/rqmrxfbp

这里也提出了类似的问题。

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

一个儿子

继续选择使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。