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

我在课程页脚中添加了以下属性。

  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>

Answer 2

.footer {
    display: block;
    width:100%;
    height:60px;
    background-color:#551111;
    color:#fff;
    border-top:1px solid #CDCDCD;
    position:absolute;
    bottom: 0;
}

这会将您的页脚放在底部。这是为了防止页脚重叠其上方的内容，因为它是从文档流中删除的位置：absolute;。

将页脚保持在底部

2 个答案: