保持页脚在底部 [英] Keep footer at the bottom

问题描述

我有一个脚注在身体内部的布局，因为我有一个侧栏100％的高度。

事实是我需要保持脚注在当身体内容的高度小于屏幕高度时。在这里，我附上一个

另外，当身体内容高度高于屏幕高度，页脚应该沿着最后一行。

$ b HTML ：

 < div id =header> GENERAL HEADER< / div> < div id =main_body> 
< div id =sidebar> SIDE< / div> 
< div id =body> 
内容
< div class =footer>一般页脚< / div> 
< / div> 
< / div> 
  

CSS：

  * {margin：0; padding：0;} 
 html {overflow：hidden; font-family：Helvetica Neue，Helvetica，Arial，sans-serif; font-weight：100;} 
 body {background：#fff;位置：绝对的;宽度：100％; height：100％; overflow：auto;} 
 #main_body {
 background：#fff; 
身高：100％; 
 padding：50px 0 0; 
 box-sizing：border-box; 
宽度：100％; 
 min-width：900px; 
} 
 #header {
 background：＃119911; 
位置：绝对; 
宽度：100％; 
最小宽度：960px; 
 height：50px; 
 display：flex; 
 display：-webkit-box; 
 display：-moz-box; 
显示：-ms-flexbox; 
 display：-webkit-flex; 
 -webkit-flex-flow：行nowrap; 
 justify-content：flex-start; 
 align-items：center; 
} 
 #sidebar {background：＃f2f2f2;向左飘浮;宽度：60像素;高度：100％; overflow：hidden;} 
 #body {
 background：＃c2c2c2; 
身高：100％; 
 overflow：scroll; 
 word-wrap：分词; 
} 
 .footer {
 display：block; 
宽度：100％; 
 height：60px; 
背景颜色：＃551111; 
颜色：#fff; 
 border-top：1px solid #CDCDCD; 
} 
  

我该怎么办？

解决方案

我在类 footer 中添加了以下属性。

  bottom：0px; 
位置：固定; 
  

试试这个：

  * {margin：0; padding：0;} html {overflow：hidden; font-family：Helvetica Neue，Helvetica，Arial，sans-serif; font-weight：100;} body {background：#fff;位置：绝对的;宽度：100％; height：100％; overflow：auto;}＃main_body {background：#fff;高度：100％;填充：50px 0 0;箱尺寸：边界盒;宽度：100％; min-width：900px;}＃header {background：＃119911;位置：绝对的;宽度：100％;最小宽度：960像素;高度：50像素;显示：弯曲;显示：-webkit-box;显示：-moz-box;显示：-ms-flexbox;显示：-webkit-flex; -webkit-flex-flow：行nowrap;证明内容：柔性启动; align-items：center;}＃sidebar {background：＃f2f2f2;向左飘浮;宽度：60像素;高度：100％; overflow：hidden;}＃body {background：＃c2c2c2;高度：100％;溢出：滚动; word-wrap：break-word;}。footer {display：block;宽度：100％;高度：60像素;背景色：＃551111;颜色：#FFF; border-top：1px solid #CDCDCD;底部：0像素; position：fixed;}  

 < div id =header > GENERAL HEADER< / div>< div id =main_body> < div id =sidebar> SIDE< / div> < div id =body>内容< div class =footer>通用页脚< / div> < / div>< / div>  

I have a layout where the footer is inside the body, because i have a sidebar 100% height.

The fact is that I need to keep the footer at the bottom when the height of the body content is less than the screen height.

Here I attach a Fiddle example where can be seen that the footer is just below the last line of the body.

Also, when the body content height is higher than screen height, the footer should follow the last line.

HTML:

<div id="header">GENERAL HEADER</div> <div id="main_body">
    <div id="sidebar">SIDE</div>
    <div id="body">
        the content
        <div class="footer">general footer</div>
    </div>
</div>

CSS:

*           {margin:0; padding:0;}
html        {overflow: hidden;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:100;}
body        {background:#fff; position:absolute; width:100%; height:100%;overflow: auto;}
#main_body  {
    background:#fff;
    height:100%;
    padding:50px 0 0;
    box-sizing:border-box;
    width:100%;
    min-width:900px;
}
#header     {
  background:#119911;
  position:absolute;
  width:100%;
  min-width:960px;
  height:50px;
  display:flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row nowrap;
  justify-content:flex-start;
  align-items:center;
}
#sidebar    {background:#f2f2f2; float:left; width:60px; height:100%; overflow:hidden;}
#body       {
    background:#c2c2c2;
    height:100%;
    overflow:scroll;
    word-wrap: break-word;
}
.footer {
    display: block;
    width:100%;
    height:60px;
    background-color:#551111;
    color:#fff;
    border-top:1px solid #CDCDCD;
}

What should I do?

解决方案

I have added the following properties in the class footer.

  bottom:0px;
  position:fixed;

Try this:

*           {margin:0; padding:0;}
html        {overflow: hidden;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:100;}
body        {background:#fff; position:absolute; width:100%; height:100%;overflow: auto;}
#main_body  {
    background:#fff;
    height:100%;
    padding:50px 0 0;
    box-sizing:border-box;
    width:100%;
    min-width:900px;
}
#header     {
  background:#119911;
  position:absolute;
  width:100%;
  min-width:960px;
  height:50px;
  display:flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-flow: row nowrap;
  justify-content:flex-start;
  align-items:center;
}
#sidebar    {background:#f2f2f2; float:left; width:60px; height:100%; overflow:hidden;}
#body       {
    background:#c2c2c2;
    height:100%;
    overflow:scroll;
    word-wrap: break-word;
}
.footer {
    display: block;
    width:100%;
    height:60px;
    background-color:#551111;
    color:#fff;
    border-top:1px solid #CDCDCD;
    bottom:0px;
    position:fixed;
}

<div id="header">GENERAL HEADER</div>
<div id="main_body">
    <div id="sidebar">SIDE</div>
    <div id="body">
        the content
        <div class="footer">general footer</div>
    </div>
</div>

这篇关于保持页脚在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！