猿问

使页脚正确地粘在页底

使页脚正确地粘在页底

我试图让我的页脚(只是一个div，其中有一行文本)在屏幕底部，如果内容没有一直走到底部，或者在内容需要滚动条时位于内容的底部。如果内容不需要滚动条，它可以很好地工作，但是当内容太长时，页脚仍然位于相同的位置，就在内容的顶部。

我的基本部门结构是：

<div id="container">
    <div id="body"></div>
    <div id="footer"></div></div>

我相应的CSS(略为删减)：

body {
    margin: 0;
    padding: 0;
    height: 100%;}html {
    margin: 0;
    padding: 0;
    height: 100%;}#container {
    width: 674px;
    min-height: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;}#body {
    width: 616px;
    padding: 5px 14px 5px 14px;
    margin: 0 auto;
    padding-bottom: 20px;}#footer {
    position: absolute;
    bottom: 0;
    width: 644px;
    height: 20px;
    margin: 0 auto;}


当年话下
浏览 394回答 3
3回答

守着星空守着你

最简单的解决办法是使用min-height在<html>标记并定位<footer>带着position:absolute;演示:&nbsp;小提琴所以片段：html&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;min-height:&nbsp;100%;}body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;0&nbsp;0&nbsp;100px; &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;bottom&nbsp;=&nbsp;footer&nbsp;height&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;25px;}footer&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;orange; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;}<article> &nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;or&nbsp;<div&nbsp;class="container">,&nbsp;etc.&nbsp;--> &nbsp;&nbsp;&nbsp;&nbsp;<h1>James&nbsp;Dean&nbsp;CSS&nbsp;Sticky&nbsp;Footer</h1> &nbsp;&nbsp;&nbsp;&nbsp;<p>Blah&nbsp;blah&nbsp;blah&nbsp;blah</p> &nbsp;&nbsp;&nbsp;&nbsp;<p>More&nbsp;blah&nbsp;blah&nbsp;blah</p></article><footer> &nbsp;&nbsp;&nbsp;&nbsp;<h1>Footer&nbsp;Content</h1></footer>
0

万千封印

为何不使用：{ position: fixed; bottom: 0 }&nbsp;?
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答