粘性页脚 CSS
我有一个非常基本的网站（页眉、内容、页脚没有侧边栏或任何东西），问题是内容区域与页脚重叠。我已经尝试了所有粘性页脚修复（即 csstricks、ryanfait.com 和我在 google 上找到的其他一些修复以及这里的一些修复，但它们都不起作用
像往常一样，任何帮助都会受到赞赏
<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%;
}
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
As usual any help is appreciated
<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%;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
为什么你的内容是绝对定位的？它似乎不需要，并且会导致您遇到的问题。删除它并制作页脚：
http://jsfiddle.net/JyQxW/
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:
http://jsfiddle.net/JyQxW/
您是否正在尝试制作粘性页脚，即即使滚动时也始终位于页面底部的页脚，或者您只是想解决内容溢出问题？
为了防止内容溢出，请将
#content向左或向右浮动。Are you trying to make a sticky footer, i.e. one that is always at the bottom of the page even when you scroll, or are you just trying to fix the content-overflow issue?
To keep the content from overflowing, float
#contentto the left or right.您可以尝试在开始页脚之前清除两者。
You could try to clear both before you begin your footer..