Javascript 我需要帮助使我的页脚在调整浏览器大小时不覆盖我的内容_Javascript_Html_Css

Javascript 我需要帮助使我的页脚在调整浏览器大小时不覆盖我的内容

javascript html css

Javascript 我需要帮助使我的页脚在调整浏览器大小时不覆盖我的内容,javascript,html,css,Javascript,Html,Css,我已经使用这个解决方案，使我的页脚粘到我的页面底部，即使当浏览器的大小调整。这是我的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

我已经使用这个解决方案，使我的页脚粘到我的页面底部，即使当浏览器的大小调整。这是我的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://stever.ca
http://www.cssstickyfooter.com
*/
*{边距：0；填充：0；}
html，正文{高度：100%；}
#包裹{最小高度：100%；}
#标题{
顶部：-14px；
左：-20px；
背景图片：url（'header.jpg'）；
背景重复：无重复；
背景大小：140%；
背景位置：-344px；
高度：333px！重要；
宽度：1349px；
}
#主{溢出：自动；
填充底部：180px；}/*必须与页脚高度相同*/
#页脚{
位置：相对位置；
背景图片：url（'footerbg.jpg'）；
页边距顶部：-180px；/*页脚高度的负值*/
高度：180像素；
宽度：1349px；
清除：两个；}
/*歌剧修复*/
正文：在{/*感谢Maleika（科霍特克）之前*/
内容：“；
身高：100%；
浮动：左；
宽度：0；
利润顶部：-32767px；/*谢谢Erik J-否定浮动的影响*/
}
保险商实验室
{
列表样式类型：无；
}
a:链接{文本装饰：无；
颜色：白色；
}
链接{颜色：白色！重要；
-webkit过渡：颜色0.3s易用；
-moz过渡：颜色0.3s易用；
-o型过渡：颜色0.3s，易于调节；
过渡：颜色0.3s，易于调整；
}
访问{颜色：白色！重要；}
悬停{颜色：红色！重要；}
a:活动{颜色：白色！重要；}
#新闻{
位置：相对位置；
顶部：300px；
左：195px；
高度：20px；
宽度：30px；
}
#商店{
位置：相对位置；
顶部：280px；
左：665px；
高度：20px；
宽度：30px；
}
#即将到来{
位置：相对位置；
顶部：390px；
左：15px；
颜色：#000000！重要；
}
a、 邮件链接{颜色：蓝色！重要；}
a、 邮件链接：悬停{颜色：粉红色；文本装饰：无！重要；}
导航{
宽度：100%；
浮动：左；
保证金：0.03亿元；
填充：0；
列表样式类型：无！重要；}
李海军{
浮动：左；}
#nav1{
位置：相对位置；
顶部：11px；
左：34.5%；
字体系列：不透光，不规则；
颜色：白色；
字体大小：.9em；
z指数：1；
}
#nav2{
位置：相对位置；
顶部：11px；
左：36.3%；
字体系列：不透光，不规则；
颜色：白色；
字体大小：.9em；
z指数：1；
}
#nav3{
位置：相对位置；
顶部：11px；
左：38%；
字体系列：不透光，不规则；
颜色：白色；
字体大小：.9em；
z指数：1；
}
#nav4{
位置：相对位置；
顶部：11px；
左：39.8%；
字体系列：不透光，不规则；
颜色：白色；
字体大小：.9em；
z指数：1；
}
#nav5{
位置：相对位置；
顶部：11px；
左：41.6%；
字体系列：不透光，不规则；
颜色：白色；
字体大小：.9em；
z指数：1；
}
#导航1：悬停{
位置：相对位置；
顶部：11px；
左：34.5%；
字体系列：不透光，不规则；
颜色：红色；
字体大小：.9em；
z指数：1；
}
#导航2：悬停{
位置：相对位置；
顶部：11px；
左：36.3%；
字体系列：不透光，不规则；
颜色：红色；
字体大小：.9em；
z指数：1；
}
#导航3：悬停{
位置：相对位置；
顶部：11px；
左：38%；
字体系列：不透光，不规则；
颜色：红色；
字体大小：.9em；
z指数：1；
}
#导航4：悬停{
位置：相对位置；
顶部：11px；
左：39.8%；
字体系列：不透光，不规则；
颜色：红色；
字体大小：.9em；
z指数：1；
}
#导航5：悬停{
位置：相对位置；
顶部：11px；
左：41.6%；
字体系列：不透光，不规则；
颜色：红色；
字体大小：.9em；
z指数：1；
}







我的主要内容在这里

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

很好。现在，如图所示：

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

现在让我调整一下浏览器的大小，哦，为什么现在会这样

页脚随着浏览器的移动而移动，因为它正在调整大小并覆盖我的主要内容。我想把它放在下面。有人能提供解决方案吗？

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

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

然而，如果你确实用内容来填充它，就我所知，它正在做正确的事情

…因为它不覆盖您的内容，当您实际拥有某些内容时

欢迎使用堆栈溢出！