1

だから私が持っているのは私のメインエリア/ボディのコンテナです。そのコンテナの下には私のフッターコンテナがあります。私が欲しいのは、ボディ領域に含まれるコンテンツに応じて、ボディ領域の高さを変更することです。幅が指定されています。高さをピクセル単位で指定でき、機能します。しかし、それを自動にすると、フッターは自分のボディコンテナの上に配置されます。誰かが私が間違っていることを教えてもらえますか？

HTML：

<div id="inventory"> <!-- BEGIN INVENTORY -->

<ul class= "inventory">
<li>About #  </li>
<li>### </li>
<li>==</li>

</ul>

</div> <!-- END INVENTORY -->

<div id="text"> <!-- BEGIN CONTENT TEXT -->

<h2> About </h2> <br/>

 This is content

</div> <!-- END CONTEXT TEXT -->

<div id="inventory_right"> <!-- BEGIN INVENTORY RIGHT -->

<p class= "inventory_right"> If you have any questions, please do not hesitate to    <br/> <a href= "#"> contact us </a> </p>

</div> <!-- END INVENTORY RIGHT -->

</div> <!-- END CONTENT -->

<div id="footer"> <!-- BEGIN FOOTER -->
<p class="copyright"> Copyright © 2012 | Philip </p>
</div> <!-- END FOOTER -->



</div> <!--END CONTAINER-->
</body>


</html>

css：

   #container {
        width: 1200px;
        margin: auto;
    }

    #content_other {


        width: 1200px;
        height: auto;

        }

    #inventory {

        background-image: url(../website/images/inventory.png);
        width: 154px; 
        height: 146px;
        margin-top: 80px;
        margin-left: 140px;
        float:left;
        display: block;

        }

   #inventory_right {

        background-image: url(../website/images/inventory.png);
        width: 154px; 
        height: 146px;
        margin-top: 80px;
        margin-right: 50px;
        float:right;
        display: block;

        }

    #text {

        float: left;
        border-style: solid;
        border-width: 0px;
        width: 600px;
        height: auto;
        margin-top: 80px;
        margin-left: 50px;
        }

    #footer {

        background-image: url(../website/images/footer.png);
        width: 1200px;
        height: 100px;

        }
4

2 に答える 2

1

を使用するため、親divにプロパティをfloat与えるか、overflowclear:both

あなたのフッターに

  #footer
{
background-image: url(../website/images/footer.png);
width: 1200px;
height: 100px;
clear:both;
}

また

#container {
width: 1200px;
margin: auto;
overflow:hidden;
}
于 2012-08-02T09:07:31.650 に答える
1

フッターに新しいCSSルールを追加します：clear：both; それは役立つはずです。

于 2012-08-02T09:01:30.973 に答える