Question

正如标题所说，页脚会覆盖网站的内容，它不会转到页面底部。有任何想法吗？以下是截图：http://prntscr.com/4zoamr，这是我的CSS代码：

/* MAIN STYLES */

body{
background: url("bg.jpg") fixed no-repeat center;
margin: 0;
padding: 0;
color: #FFF;
}

a{
text-decoration: none;
color: #FFF;
}

a:active{
text-decoration: none;
color: #FFF;
}

a:hover{
text-decoration: none;
color: #FFF;
}

a:visited{
text-decoration: none;
color: #FFF;
}

/* HEADER */

#header{
background: #111;
width: 100%;
height: 190px;
border-bottom: 10px solid #891614;
}

#header #logo{
font-family: Century Gothic;
font-size: 30px;
padding-top: 1px;
padding-left: 50px;
}

#header #menu{
font-family: Century Gothic;
text-transform: lowercase;
font-size: 17px;
padding-left: 10px;
padding-top: 10px;
line-height: 18px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
}

#header #menu a{
padding-left: 5px;
padding-right: 15px;
}

#header #menu a:hover{
color: #b0b0b0;
}

/* END HEADER */

/* CONTENT */

#content{
width: 1100px;
padding: 30px;
margin: 0 auto;
}

/* ARTICLE */

#content #article{
float: left;
width: 700px;
}

#content #article h1{
background: #891614;
border: 1px solid #111;
line-height: 18px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid #000;
height: 25px;
font-family: Century Gothic;
font-size: 23px;
font-weight: 100;
}

#content #article p{
background: rgba(0, 0, 0, 0.7);
line-height: 18px;
box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 1px solid #000;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid #000;
height: 25px;
font-family: Century Gothic;
font-size: 17px;
}

/* END ARTICLE */

/* SIDEBAR */

#content #sidebar{
float: right;
width: 350px;
}

#content #sidebar h1{
background: #891614;
border: 1px solid #111;
line-height: 18px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid #000;
height: 25px;
font-family: Century Gothic;
font-size: 23px;
font-weight: 100;
}

#content #sidebar p{
background: rgba(0, 0, 0, 0.7);
line-height: 18px;
box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 1px solid #000;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid #000;
height: 25px;
font-family: Century Gothic;
font-size: 17px;
}

/* END SIDEBAR */

#content #footer{
width: 1088px;
position: absolute;
background: #891614;
border: 1px solid #111;
line-height: 18px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.701961);
padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px;
border: 1px solid #000;
height: 25px;
font-family: Century Gothic;
font-size: 17px;
}

#content #footer #copyright{
float: left;
}

#content #footer #links{
float: right;
padding-bottom: 10px;
padding-right: 10px;
}


/* END CONTENT */

那么，我怎样才能将页脚放在页面底部？我尝试使用“底部”属性，但它仍然覆盖了内容，我也尝试了“margin-top”但它没有按照我的意愿工作。

编辑：HTML代码：

<html>
<head>
<title>Pwned Gaming - Website</title>

<link href="styles.css" type="text/css" rel="stylesheet" />

</head>
<body>

<!-- HEADER -->

<div id="header">

<!-- LOGO -->

<div id="logo">

<h1>pwned-gaming.com</h1>

</div>

<!-- END LOGO -->

<!-- MENU -->

<div id="menu">

<a href="index.html">Home</a>
<a href="#">Forum</a>
<a href="news.html">News</a>
<a href="team.html">Squad</a>
<a href="pwned_tv.html">Pwned TV</a>
<a href="media.html">Media</a>
<a href="contact.php">Contact</a>

</div>

<!-- END MENU -->

</div>

<!-- END HEADER -->



<!-- CONTENT -->

<div id="content">

<!-- ARTICLE -->

<div id="article">

<h1>Welcome on pwned-gaming.com</h1>

<p> &bull; Welcome on our brand new website.</p>

<h1>Welcome on pwned-gaming.com</h1>

<p> &bull; Welcome on our brand new website.</p>

<h1>Welcome on pwned-gaming.com</h1>

<p> &bull; Welcome on our brand new website.</p>

</div>

<!-- END ARTICLE -->

<!-- SIDEBAR -->

<div id="sidebar">

<h1>Welcome, user.</h1>

<p> &bull; Welcome on our brand new website.</p>

</div>

<!-- END SIDEBAR -->

<!-- FOOTER -->

<div id="footer">

<div id="copyright">

&copy; Pwned Gaming - 2011 - 2014.

</div>

<div id="links">

<a href="http://facebook.com"><img src="fb.png" /></a>
<a href="http://twitter.com"><img src="tw.png" /></a>
<a href="http://youtube.com"><img src="yt.png" /></a>

</div>

</div>

<!-- END FOOTER -->

</div>

<!-- END CONTENT -->

</body>
</html>

Answer 1

你试过清除页脚的两边吗？

将此添加到页脚样式

 clear:both;

并从页脚中删除绝对位置属性和底部等

页脚会覆盖我网站的内容

1 个答案: