如何防止粘性页脚在放大时重叠在内容之上
如何防止粘性页脚在放大时重叠在内容之上
提问于 2011-08-13 08:23:53
我有一个带有粘性页脚的网页，当放大太多时，页脚和它的内容会与上面的内容重叠。我如何防止这种情况发生？链接如下：
http://www.hitone101.com/
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-08-13 08:54:05
赋予#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;
}Stack Overflow用户
发布于 2011-08-13 08:32:13
首先，页脚应该是带有bottom:0px的position:fixed。为了防止它在调整大小时重叠过多，您可能希望将其设置为%高度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7047674
复制相关文章
相似问题
腾讯云开发者
