如何将页脚放置在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

有人可以帮忙吗？非常感谢。

来源

2015-09-25 Mincong Huang

检查我的回答，希望它帮助。 –

您需要在页面div上添加'position：relative'和'position：absolute'到页脚div –

@AlessandroIncarnati没有必要评论只是说您已经创建了一个答案。提问者会自动得到通知（并且自己向下滚动并找出它并不困难！）。 –

您正在失踪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; 
}

DEMOhttp://jsfiddle.net/9xzb9m48/3/

来源

2015-09-25 11:17:16

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

来源

2015-09-25 11:20:01

感谢乌什玛，你的回答是对的，但我只能接受一个答案。祝你今天愉快！ :) –

OP为什么要“尝试这个”？一个好的答案将总是解释做了什么以及为什么这样做，不仅是为了OP，而且是为了将来SO的访问者。 –

如何将页脚放置在CSS页面的底部？

回答

相关问题