2012-08-02 58 views
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; 

     } 

回答

1

因为你用float,给overflow属性为你的父母DIV,或使用clear:both

到您的页脚

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

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

添加新的CSS规则页脚:明确:两者; 它应该有所帮助。