Question

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

理想的行为是：

当内容未占用屏幕时，页脚位于屏幕下方，中间区域伸展以填充中间空间。
当内容占用超过屏幕时，页脚位于内容的底部，而不是屏幕。

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

提出了类似的问题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，我添加了正确的标记，而不是使用匿名表元素。

将来我们不知道这些是如何渲染的，所以我认为添加它们会确保它们按预期工作（并且更容易阅读标记）。

＆＃13;

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

＆＃13;

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

＆＃13;

使用flexbox标记可以稍微清理

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

希望这有效。

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

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

2 个答案: