如何将页脚放置在CSS页面的底部?
我试着为每个页面创建一个页脚。客体是将页脚居中放置在页面底部。您可以检查我的JSFiddle,或直接查看代码,如下所示。如何将页脚放置在CSS页面的底部?
HTML
<div id="page1" class="page">
<div class="footer">
<p>1</p>
</div>
</div>
CSS
div.page {
height: 300px;
width: 180px;
border: 1px solid #000;
margin: auto;
margin-bottom: 5px;
text-align: center;
}
div.footer {
background-color: #DDD;
width: 100%;
bottom: 0; /* doesn't work */
}
p {
width: 15px;
color: white;
background-color: red;
text-align: center;
margin: auto;
bottom: 0;
}
只见约How to position div at the bottom of a page ?类似的问题。然而,当我申请它的主张,底部 + 位置设置,每页中的页脚都合并在一起,放置在导航窗口的底部。这里的相关JSFiddle
有人可以帮忙吗?非常感谢。
您正在失踪position:relative;适用于class =“page”。 这样,应用了绝对位置的元素就知道它必须是相对于父元素.page的bottom:0。
div.page {
height: 300px;
width: 180px;
border: 1px solid #000;
margin: auto;
margin-bottom: 5px;
text-align: center;
position:relative;
}
div.footer {
background-color: #DDD;
width: 100%;
bottom: 0; /* it works now */
position: absolute;
}
p {
width: 15px;
color: white;
background-color: red;
text-align: center;
margin: auto;
bottom: 0;
}
谢谢Lars,显然。我依靠的是代码中绝对位置的Jsfiddle。 –
感谢您的回答亚历山德罗,快速,简单。快乐编码:) –
不客气民聪:)快乐编码!^_^ –
试试这个:
div.page {
height: 300px;
width: 180px;
border: 1px solid #000;
margin: auto;
margin-bottom: 5px;
text-align: center;
position: relative;
}
div.footer {
background-color: #DDD;
width: 100%;
position: absolute;
bottom: 0;
}
p {
width: 15px;
color: white;
background-color: red;
text-align: center;
margin: auto;
bottom: 0;
}
感谢乌什玛,你的回答是对的,但我只能接受一个答案。祝你今天愉快 ! :) –
OP为什么要“尝试这个”?一个好的答案将总是解释做了什么以及为什么这样做,不仅是为了OP,而且是为了将来SO的访问者。 –
检查我的回答,希望它帮助。 –
您需要在页面div上添加'position:relative'和'position:absolute'到页脚div –
@AlessandroIncarnati没有必要评论只是说您已经创建了一个答案。提问者会自动得到通知(并且自己向下滚动并找出它并不困难!)。 –