【发布时间】：2014-02-10 03:40:52
【问题描述】：
我的页脚似乎有问题。我的内容 div 不会将页脚向下推。它只是通过它。我已经在网上搜索了几天（甚至是stackoverflow），但我似乎找不到解决方案。如果有人可以帮助我，我将不胜感激。我已尝试清理 html，因此帮助我会更容易，但是，如果您喜欢原始代码，请转到 http://djstarkick.com/where-we-belong。 （您还会看到页脚的问题。
HTML 代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>StarKick</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css">
</head>
<body>
<div class="background">
<div class="Container">
<div class="Header">
<div class="Slideshow">
<div class="TopLine"></div><!--TopLine-->
<div class="NewMusic">
<div class="NewMusicText"></div><!--NewMusicText-->
</div><!--NewMusic-->
<div class="WhereWeBelongPodcast">
<div class="WhereWeBelongPodcastText"></div><!--WhereWeBelongPodcastText-->
</div><!--WhereWeBelongPodcast-->
<div class="Meny">
</div>
</div><!-- Meny-->
</div><!--Slideshow-->
<div class="HeaderLine"></div><!--HeaderLine-->
<div class="Logo"></div><!--Logo-->
</div><!--Header-->
<div class="MainContent">
<div class="TwitterPost">
<div class="TwitterFeed">
</div><!--TwitterFeed-->
</div><!--TwitterPost-->
<div class="Content">
<div class="contentbackground">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<hi><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?> <!--Wordpress-->
</div><!--Contentbackground-->
</div><!--Contentline-->
</div><!--Content-->
</div><!--MainContent-->
<div class="Footer"></div><!--Footer-->
</div><!--Container-->
</div><!--Background-->
</body>
</html><!-- -->
CSS 代码：
/*
Theme Name: StarKick - Where We Belong
Theme URI: djstarkick.com
Author: Dani Møllerplass
Author URI: djstarkick.com
Description: My first theme on wordpress for my own use.
Version: 1.0
*/
@charset "utf-8";
body {
margin: 0;
padding: 0;
background-color:#000
}
.background {
height: 1080px;
width: 1920px;
background-image: url(Pictures/Background/background.png);
background-repeat: no-repeat;
position: relative;
top: 0px;
}
.Container {
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
top: 0px;
}
.Header {
height: 560px;
width: 980px;
position: relative;
}
.HeaderLine {
height: 45px;
width: 980px;
}
.Share {
height: 55px;
width: 265px;
position: absolute;
top: 5px;
left: 345.5px;
}
.Logo {
height: 182px;
width: 408px;
margin-right: auto;
margin-left: auto;
position: absolute;
bottom: 25px;
left: 291px;
}
.Meny {
height: 50px;
width: 545px;
position: absolute;
top: 150px;
left: 217.5px;
}
.MenyText {
height: 50px;
width: 545px;
position: absolute;
top: 7.5px;
}
.MainContent {
width: 980px;
position: relative;
height: auto;
}
.Content {
width: 625px;
height: auto;
left: 0px;
top: 0px;
float: left;
}
.Contentline {
height: 45px;
width: 625px;
top: 0px;
}
.contentbackground {
width: 625px;
background-repeat: repeat-y;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
left: 0px;
background-color: #000;
position: relative;
}
.Footer {
height: 150px;
width: 980px;
font-family: "high Tower Text";
color: #FFF;
text-align: center;
position: relative;
clear: both;
}
.TwitterPost {
height: 650px;
width: 325px;
right: 0px;
float: right;
}
.TwitterFeed {
height: 600px;
width: 323px;
position: absolute;
top: 29px;
right: 1px;
}
.Slideshow {
height: 450px;
width: 980px;
position: relative;
}
.NewMusic {
height: 53px;
width: 332px;
position: absolute;
left: 0px;
bottom: 0px;
}
.NewMusicText {
height: 53px;
width: 300px;
position: absolute;
left: -5px;
bottom: 3px;
}
.TopLine {
height: 397px;
width: 980px;
position: absolute;
top: 0px;
}
.WhereWeBelongPodcast {
height: 53px;
width: 332px;
position: absolute;
right: 0px;
bottom: 0px;
}
.WhereWeBelongPodcastText {
height: 53px;
width: 300px;
position: absolute;
right: -15px;
bottom: 0px;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
color: #FFF;
text-decoration: none;
}
a:hover {
color: #CCC;
text-decoration: none;
}
a:active {
color: #FFF;
text-decoration: none;
font-family: "high Tower Text";
text-align: center;
}
.background .Container .Header .Slideshow .Meny .MenyText table tr td {
color: #FFF;
font-family: "high Tower Text";
text-align: center;
}
.year {
font-size: 22px;
}
提前致谢！ :)
【问题讨论】：