html - 高度 : auto; isn't working well

Question

所以我拥有的是我的主要区域/ body 的容器。在那个容器下面是我的页脚容器。我想要的是 body 区域根据其中的内容调整其高度。宽度已指定。我可以以像素为单位指定高度并且它有效。但是当我把它设置为自动时，页脚将自己放在我的主体容器上方。有人可以告诉我我做错了什么吗？

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;

        }

Answer 1

因为你使用了float，将overflow属性赋给你的parent div，或者使用clear:both

到你的页脚

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

或

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