Question

即使调整了浏览器大小，我也使用了这个Sticky Footer解决方案让我的页脚粘在页面底部。这是我的html和内部css。

<html>
<!DOCTYPE html>
<head>
<style>
/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

html, body {height: 100%;}

#wrap {min-height: 100%;}

#header {
top:-14px;
left:-20px;
background-image:url('header.jpg');
background-repeat: no-repeat;
background-size: 140%;
background-position:-344px;
height:333px !important;
width:1349px;
}

#main {overflow:auto;
padding-bottom: 180px;}  /* must be same height as the footer */

#footer {
position:relative;
background-image: url('footerbg.jpg');
margin-top: -180px; /* negative value of footer height */
height: 180px;
width:1349px;
clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}


ul
{
list-style-type: none;
}



a:link{text-decoration:none;
color:white;
}

a:link    {color:white !important;
-webkit-transition:color 0.3s ease-in;  
-moz-transition:color 0.3s ease-in;  
-o-transition:color 0.3s ease-in;  
transition:color 0.3s ease-in;  
}
a:visited {color:white !important;}
a:hover   {color:red !important;}
a:active  {color:white !important;}


#news{
position:relative;
top:300px;
left:195px;
height: 20px;
width: 30px;
}

#shop{
position:relative;
top:280px;
left:665px;
height: 20px;
width: 30px;
}


#coming{
position:relative;
top:390px;
left:15px;
color: #000000 !important;
}

a.maillink {color:blue !important;}
a.maillink:hover {color:pink;text-decoration:none !important;}




nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style-type: none !important; }
nav li {
float: left; }



#nav1 { 
position:relative;
top:11px;
left:34.5%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;

z-index:1;
}


#nav2 { 
position:relative;
top:11px;
left:36.3%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}


#nav3 { 
position:relative;
top:11px;
left:38%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}

#nav4 { 
 position:relative;
 top:11px;
 left:39.8%;
 font-family: insolentitalic, insolentregular;
 color:white;
 font-size:.9em;
 z-index:1;
 }


#nav5 { 
position:relative;
top:11px;
left:41.6%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}


#nav1:hover { 
position:relative;
top:11px;
left:34.5%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}


#nav2:hover { 
position:relative;
top:11px;
left:36.3%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}


#nav3:hover { 
position:relative;
top:11px;
left:38%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}

#nav4:hover { 
position:relative;
top:11px;
left:39.8%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}


#nav5:hover { 
position:relative;
top:11px;
left:41.6%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}

</style>
</head>
<body>
<div id="header">
<nav>
<ul>
    <li id="nav1"><a href="">HOME</a></li>
    <li id="nav2"><a href="">ETC</a></li>
    <li id="nav3"><a href="">ETC</a></li>
    <li id="nav4"><a href="">ETC</a></li>
    <li id="nav5"><a href="">CONTACT</a></li>
</ul>
</nav>
</div>

<div id="wrap">
<div id="main">
<p>My main content here</p>
</div>

</div>

<div id="footer">
</div>
</body>
</html>

所以这就是我现在拥有的：我的标题，主要内容和页脚。

http://oi42.tinypic.com/5cdgg2.jpg

这很好。现在，如下所示：

http://oi40.tinypic.com/9h71pz.jpg

当浏览器窗口调整大小时，页脚不会覆盖内容，这很好。到现在为止还挺好。现在我向下滚动找到我的页脚，它很好;如下所示：

http://oi39.tinypic.com/350m7ti.jpg

现在让我只调整浏览器的大小哦，为什么现在发生这种情况？

http://oi44.tinypic.com/16azko2.jpg

当页面调整大小并覆盖我的主要内容时，页脚随浏览器移动。我想把它保持在下面。任何人都可以为此提供解决方案吗？

Answer 1

在我看来，它基本上做了正确的事情。它覆盖了内容区域，因为您的内容没有最小尺寸，因此它将按内容调整大小;

#main {overflow:auto;
padding-bottom: 180px;}  /* must be same height as the footer */

但是，如果你用内容填充它，就我理解你要做的事情而言，它做的是正确的事情;

Fiddle

...当你实际拥有一些内容时不覆盖你的内容

当我调整浏览器大小时，我需要帮助让我的页脚不覆盖我的内容

1 个答案: