如何将页脚粘贴到屏幕底部并防止中间部分延伸到页脚下方？ [英] How to stick footer to bottom of screen and prevent middle section extending below footer?

问题描述

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

所需的行为是： 屏幕上，页脚位于屏幕的
底部，中间区域延伸至中间空间。

当内容占用多于屏幕时，页脚位于内容的
底部，而不是屏幕。

我最终用表和 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; 
宽度：100％; 
身高：100％; 
} 
 
 #left_col {
 background：orange; 
 display：table-cell; 
宽度：15％; 
} 
 
 #main_content {
 background：＃ff0; 
 display：table-cell; 
} 
 
 #right_col {
 background：green; 
 display：table-cell; 
宽度：15％; 
} 
 
 #footer {
 background：＃3a3a3a; 
 height：200px; 
位置：绝对; 
宽度：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 {宽度：100％; height：100％;}。header {background：＃0099cc none repeat scroll 0 0; height：75px;}。menu {border-bottom：1px solid＃555; border-top：1px solid＃555;背景颜色：＃999; height：0;}。footer {background：＃3a3a3a; height：75px;}＃left_col {background：orange none重复滚动0 0;宽度：15％;}＃main_content {背景：黄色无重复滚动0 0;}＃right_col {背景：绿色无重复滚动0 0; width：15％;} ul＃main_menu {margin：0;填充：0; text-align：center;}＃main_menu li {border-right：1px solid＃555;显示：inline-block; margin-right：-4px; / *可能需要根据字体大小进行调整* / width：20％;}＃main_menu li a {color：#fff;显示：块; font-family：arial; font-size：15px; letter-spacing：1px; line-height：24px;填充：5px 0; text-decoration：none;}  

< div class = tbl容器> < 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> < / 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_colclass =cell>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容最后< / div> < div id =main_contentclass =cell>< / div> < div id =right_colclass =cell>< / div> < / DIV> < / DIV> < / DIV> < / DIV> < div class =row> < div class =cell footer> < / DIV> < / div>< / div>


$ b

---

$ b $

使用 flexbox 标记可以被清理一些

  html，body {margin：0;}。flex {display：flex;}。flex.column {flex-direction：column} .flexitem {}。container {min-height：100vh; } .header {background：＃0099cc无重复滚动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重复滚动0 0;宽度：15％;}＃main_content {背景：黄色无重复滚动0 0;}＃right_col {背景：绿色无重复滚动0 0; width：15％;} ul＃main_menu {margin：0;填充：0; text-align：center;}＃main_menu li {list-style-type：none; border-right：1px solid＃555; width：20％;}＃main_menu li a {color：#fff;显示：块; font-family：arial; font-size：15px; letter-spacing：1px; line-height：24px;填充：5px 0; text-decoration：none;}  

< div class = 柔性柱状容器> < div class =header> < / DIV> < div class =menu> < ul id =main_menuclass =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> < / li>< li>< a href =/ five.html> five< / a>< / li> < / UL> < / DIV> < div class =flex content> < div id =left_col>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容< br>长内容最后< / div> < div id =main_content>< / div> < div id =right_col>< / div> < / DIV> < div class =footer> < / div>< / div>

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

解决方案

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>

这篇关于如何将页脚粘贴到屏幕底部并防止中间部分延伸到页脚下方？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！