Html 页脚覆盖我的网站的内容_Html_Css

Html 页脚覆盖我的网站的内容

html css

Html 页脚覆盖我的网站的内容,html,css,Html,Css,正如标题所说，页脚覆盖了网站的内容，不会进入页面底部。有什么想法吗？这是一个屏幕截图：这是我的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:

正如标题所说，页脚覆盖了网站的内容，不会进入页面底部。有什么想法吗？这是一个屏幕截图：这是我的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 */

那么，我怎样才能把页脚放在页面底部呢？我尝试使用“底部”属性，但它仍然覆盖了内容，我也尝试了“边距顶部”，但它没有按我想要的那样工作

编辑：此处的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>


Pwned游戏-网站
pwned-gaming.com
欢迎访问pwned-gaming.com
&bull；欢迎访问我们全新的网站
欢迎访问pwned-gaming.com
&bull；欢迎访问我们全新的网站
欢迎访问pwned-gaming.com
&bull；欢迎访问我们全新的网站
欢迎，用户。
&bull；欢迎访问我们全新的网站
&抄袭；Pwned博彩-2011-2014。

您是否尝试过清除页脚的两侧

将此添加到页脚样式

 clear:both;

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

是否尝试清除页脚的两侧

将此添加到页脚样式

 clear:both;

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

是否尝试清除页脚的两侧

将此添加到页脚样式

 clear:both;

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

是否尝试清除页脚的两侧

将此添加到页脚样式

 clear:both;

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

请发布您的基本marup！想要这样的吗？请张贴您的基本的marup！想要这样的吗？请张贴您的基本的marup！想要这样的吗？请张贴您的基本的marup！想要这样的吗？你能发布你的html吗？你能发布你的html吗？你能发布你的html吗？你能发布你的html吗？