粘性脚注CSS [英] Sticky Footer CSS
本文介绍了粘性脚注CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个漂亮的基本网站（标题，内容，页脚没有侧边栏或任何东西）问题是内容区域是重叠的页脚。我已经尝试所有的粘性页脚修复（即csstricks，ryanfait.com和一些其他我发现在谷歌和一些在这里，他们都没有工作
I have a pretty basic site (header,content,footer no sidebars or anything) the problem is the content area is overlapping the footer. I have tried all the sticky footer fixes (i.e csstricks, ryanfait.com and a few others I found on google and some on here and none of them work
像往常一样
<body>
<div class="wrapper">
<div id="header">
</div>
<div id="content">
</div>
<div id="push">
</div>
</div>
<div id="footer">
</div>
</body>
* {
margin: 0;
}
html, body {
height: 100%;
}
#header{
background-image:url("Images/nav.jpg");
width:100%;
height:64px;
}
#content{
background:#ffffff;
height:592px;
width:798px;
position:absolute;
top:80px;
left:20%;
z-index:3;
-moz-box-shadow: 0px 0px 8px #000000; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 8px #000000; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 8px #000000; /* Opera 10.5, IE9, Chrome 10+ */
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -129px;
}
#footer, #push {
height: 129px;
}
#footer{
background-color:#292929;
width:100%;
}
推荐答案
？它似乎并不需要，将导致您遇到的问题。删除该页并生成页脚：
Why is your content absolutely positioned? It does not seem to be needed and will cause the issues you are experiencing. Remove that and make the footer:
#footer {
position: fixed;
bottom: 0;
height: 80px;
}
这篇关于粘性脚注CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
