Question

我的页脚似乎有问题。我的内容div不会压低页脚。它只是通过它。我一直在网上搜索几天（甚至是stackoverflow），但我似乎无法找到解决方案。如果有人可以帮助我，我会非常感激。我已经尝试清理html，所以帮助我会更容易，但是，如果您喜欢原始代码，请转到http://djstarkick.com/where-we-belong。（您还会看到页脚的问题。

HTML code：

<!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;
}

提前致谢！：）

Answer 1

在您的页脚类之前添加一个div，就像MainContent div一样

编辑：另外，从您的height div中移除ContentLine

<强> HTML

<div class="clearFloat"></div>

<强> CSS

.clearFloat { clear: both;}

Answer 2

将float:left添加到每个容器，并为clear:left

添加footer

我的内容不会压低页脚

2 个答案: