how to prevent sticky footer from overlapping above content when zooming in
I have this webpage with a sticky footer, and when zooming in too much, the footer a开发者_如何学Gond its content overlaps the above content. How do i prevent that? here is the link:
http://www.hitone101.com/
Give #footer a style of overflow: hidden;.
Don't use a fixed width for #footercontent!
Especially not an outrageously high value of 1920px!
Remember that your users will be visiting on all kinds of devices, and may not have their browser window(s) maximized.
When users see the horizontal-scrollbar-of-DOOM™ they will flee the site, post haste.
Update for newer page:
It seemed to be a combination of conflicting width and margin settings; I ended up starting with a clean reset.
Try:
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;
}
Well first of all, the footer should be position:fixed with bottom:0px. To prevent it from overlapping too much on resize, You might want to set it to a % height.
加载中,请稍侯......
精彩评论