将页脚保留在底部
我有一个页脚在身体内部的布局,因为我有一个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;
}
我应该怎么办?
.footer {
display: block;
width:100%;
height:60px;
background-color:#551111;
color:#fff;
border-top:1px solid #CDCDCD;
position:absolute;
bottom: 0;
}
这将会把您的页脚在bottom.This是为了防止页脚从它上面的内容重叠,因为它正在从位置文档流程删除:绝对;.
是的,差不多,但问题是我不想重叠边栏。我想保留脚注在#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>
谢谢!这正是我需要的......你有想法! – Apalabrados
很高兴!!,@Apalabrados如果它为你工作..请接受它作为答案。 – adi
是的,剩下2分钟才能接受它。有一个问题......当#body内容高于屏幕高度时,我希望页脚在内容的最后一行之下,并且不应出现......如何实现? – Apalabrados
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/? –
[https://jsfiddle.net/tjbaezid/jcypsg52/]尝试页脚位置与底部绝对0 –
@MostafaBaezid是的,几乎但问题是,我不想重叠边栏。我想保留脚注在#body – Apalabrados