我的网页上有一个粘性页脚，当放大太多时，页脚及其内容与上面的内容重叠。我该如何防止这种情况？这是链接：
答案 0 :(得分：2)
给#footer overflow: hidden;样式。
请勿对#footercontent使用固定宽度！
尤其不是1920px的极高价值！
请记住，您的用户将访问各种设备，并且可能无法最大化其浏览器窗口。
当用户看到horizontal-scrollbar-of-DOOM™他们将逃离该网站时，请发布紧急信息。
它似乎是冲突的宽度和边距设置的组合;我最终以干净的重置开始。
尝试：
的 HTML：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title> Hightone - Landing Page </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta name="title" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="http://fonts.googleapis.com/css?family=Noble" rel="stylesheet" type= "text/css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="wrapper">
<header id="header"> </header><!-- #header-->
<div id="content">
<div id="logoholderDiv">
<img src="images/logo.png">
</div>
<div id="videoDiv">
<!--<img id = "xboxImg" src = "images/xbox.png" />-->
<iframe src="http://www.youtube.com/embed/Ee0bWAwgCRE" allowfullscreen="">
</iframe>
</div>
</div><!-- #content-->
</div><!-- #wrapper -->
<footer id="footer">
<div id="footercontent">
<a href="http://www.hitone101.com/index.html">ENTER SITE</a>
</div>
</footer><!-- #footer -->
</body></html>
的 CSS：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
/* font: 12px/18px Arial, Tahoma, Verdana, sans-serif; */
height: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: auto;
min-width: 1000px;
min-height: 100%;
height: auto !important;
height: 100%;
background: url( "images/landing_page_bg.png" );
border: 1px solid blue;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 1px;
}
/* Middle
-----------------------------------------------------------------------------*/
#content {
padding: 0 0 343px;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
margin: -343px auto 0;
min-width: 1000px;
height: 343px;
background: url( "images/landing_page_footer.png" )no-repeat;
background-size: 100%;
background-color: black;
}
.selfclear: after {
content: ".";
float: left;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#logoholderDiv {
width: 150px;
height: 142px;
margin-left: auto;
margin-right: auto;
}
#videoDiv {
width: 650px;
height: 551px;
background: url( "images/videobg.png" ) no-repeat;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
#videoDiv > iframe {
width: 650px;
height: 551px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
}
#footercontent {
height: 89%;
background: url( "images/footer_logo.png" ) 45.9% no-repeat;
border: 1px solid brown;
padding-top: 20px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#footercontent > a {
padding: 0px 0px 0px 0px;
text-align: center;
text-decoration: none;
color: white;
display: block;
font-size: 50px;
width: 100%;
margin: 10px auto 0px auto;
border: 1px solid;
}
答案 1 :(得分：1)
首先，页脚应为position:fixed bottom:0px。为防止它在调整大小时重叠太多，您可能需要将其设置为％高度。