html - 将页脚放在底部

Question

我有一个页脚在正文内部的布局，因为我有一个 100% 高度的边栏。

事实是，当正文内容的高度小于屏幕高度时，我需要将页脚保持在底部。

我在这里附上一个Fiddle example哪里可以看到页脚就在正文最后一行的下方。

此外，当正文内容高度高于屏幕高度时，页脚应位于最后一行。

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

我该怎么办？

Answer 1

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

  bottom:0px;
  position:fixed;

试试这个:

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