0

即使调整了浏览器的大小，我也使用了这个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>


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



很好。现在，如下所示：



当浏览器窗口调整大小时，页脚不会覆盖内容，这很好。到目前为止，一切都很好。现在我向下滚动找到我的页脚，这很好；如此处所示：



所以现在让我调整浏览器的大小，呃，为什么现在会发生这种情况？



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

4

1 回答 1

0

在我看来，它基本上在做正确的事情。它覆盖了内容区域，因为您的内容没有最小大小，因此它将根据内容进行调整；

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

但是，如果您确实用内容填充它，那么据我所知，它正在做正确的事情。

小提琴

...因为它不涵盖您的内容，当您实际上有一些内容时

于 2013-04-28T00:13:41.057 回答