将页脚保留在底部

我有一个页脚在身体内部的布局，因为我有一个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; 
}

我应该怎么办？

来源

2016-11-22 Apalabrados

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/？ –

[https://jsfiddle.net/tjbaezid/jcypsg52/]尝试页脚位置与底部绝对0 –

@MostafaBaezid是的，几乎但问题是，我不想重叠边栏。我想保留脚注在＃body – Apalabrados

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

这将会把您的页脚在bottom.This是为了防止页脚从它上面的内容重叠，因为它正在从位置文档流程删除：绝对;.

来源

2016-11-22 17:19:37

是的，差不多，但问题是我不想重叠边栏。我想保留脚注在#body – Apalabrados

@Apalabrados检查我编辑的答案。我已经删除右和左：0从css –

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

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>

来源

2016-11-22 17:23:12 adi

谢谢！这正是我需要的......你有想法！ – Apalabrados

很高兴!!，@Apalabrados如果它为你工作..请接受它作为答案。 – adi

是的，剩下2分钟才能接受它。有一个问题......当＃body内容高于屏幕高度时，我希望页脚在内容的最后一行之下，并且不应出现......如何实现？ – Apalabrados

将页脚保留在底部

回答

相关问题