0

コンテンツの長さに関係なく、コンテンツの下に Web ページのフッターを取得しようとしています。何らかの理由で、それはしたくありません。

HTML: 

<div class="container">
    <div class="navigatie">
        <ul>
            <a class="navigatielink" href="index.php?page=home"><li class="navigatieli navigatie1">Home</li></a>
            <a class="navigatielink" href="index.php?page=info"><li class="navigatieli navigatie2">Info</li></a>
            <a class="navigatielink" href="index.php?page=agenda"><li class="navigatieli navigatie3 ">Agenda</li></a>
            <a class="navigatielink" href="index.php?page=fotos"><li class="navigatieli navigatie4">Foto's</li></a>
            <a class="navigatielink" href="index.php?page=contact"><li class="navigatieli navigatie5">Contact</li></a>
            <a class="navigatielink" href="index.php?page=gastenboek"><li class="navigatieli navigatie6">Gastenboek</li></a>
        </ul>
    </div>
    <?php
        //include the page content
        include_once ("content/".$_PAGE.'.php');
    ?>
</div>
<div class="clear"></div>
<div class="footer">

CSS:

.container {
    width: 1000px;
    margin: auto;
    height: auto;
}

.clear {
    clear: both;
}
.footer {
    background-image: url("images/css/footer.png");
    height: 500px;
}

.navigatie {
    font-family: Rockwell;
    height: 45px;
    width: 980px;
    margin:auto;
    margin-top: 15px;
    font-size: 24px; 
    border: 1px solid #c3c3c3;
    background: #fff;
}

私はすでに 100% の高さを与えよう.containerとし、ポジショニングで遊んでいましたが、コンテンツの長さに関係なく、このフッターをコンテンツの下に配置できないようです...
他に何か提案はありますか?

編集：このウェブサイト
についてです

4

2 に答える 2

1

使用されているスタイルについて言及していないので、 そこでプロパティを使用したclass="navigatie"と思います。floatもしそうなら、に追加overflow:hiddenし.containerます。たとえば、

.container {
    width: 1000px;
    margin: auto;
    height: 100%; /* For IE6 */
    overflow:hidden /* For all other browsers*/
}

私の仮定が正しくない場合は、内部に存在する要素の完全なリストと.contaier完全なスタイルシートを提供してください。

編集： これを試してください

 HTML:
   <div class="contentPart">
      <?php
        //include the page content
       include_once ("content/".$_PAGE.'.php');
      ?>
 </div>

CSS:
.contentPart {
     overflow:hidden;
     height:100%;
}
于 2012-06-18T09:15:28.967 に答える
0

float:left; を追加してみてください。.footerクラスへ

.footer{
  float:left;
}

jsFiddle を取得できれば、非常に役立ちます

于 2012-06-18T09:17:43.150 に答える