我的粘性页脚不起作用
[英]My sticky footer doesn't work
问题描述
我知道这个问题已被多次询问过，但我找不到真正适合我的解决方案。
我的HTML ...
<body>
<div id="container">
</div>
<div id="footer">
</div>
</body>
我的css ....
body, html { min-height:100%;}
#container
width: 980px;
min-height: 100%;
margin: 0 auto;}
footer {
background-color: rgb(90,200,219);
height: 50px;
position: realative;
margin-top: -50px;
width: 100%; }
发生了什么，是页脚完全贴在页面底部。 但是，当内容很短时，我仍然需要向下滚动才能找到贴在底部的页脚。 有人能告诉我我的代码有什么问题吗？
2 个解决方案
解决方案1
1 2013-04-18 21:48:12
试试我把这些方法放在一起。 https://gist.github.com/derek-duncan-snippets/4228927
body, html { /*body and html have to be 100% to push header down */
height:100%;
width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my id. Position relative IMPORTANT */
position: relative;
height: auto;
min-height: 100%;
}
#header {
height: 100px;
background: rgba(255,255,255,0.2);
}
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}
解决方案2
1 2013-04-18 22:04:44
我认为你应该修复你的CSS片段，因为它有很多错误。 下次使用复制和粘贴将它放在这里，这样你的拼写错误就不会让任何人失望。
body, html { min-height:100%; }
这应该是height:100%; ，但我认为这可能是一个错字，因为你说的是页脚粘到底部，如果那条线真的在你的实际CSS中就不会这样。
#container缺少一个括号，应该是#container { 。
如果这些问题得到解决，除了@Owlvark指出的问题。 这似乎在jsFiddle工作得很好。 我能想到的唯一改进是增加margin: 0px; to body, html ，这可能是你的问题，因为它摆脱了一些额外的空间，可以呈现垂直滚动条。 但是当你说你必须“向下滚动才能找到页脚”时，你的问题似乎更严重。
粘性页脚不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.