当div内容增加时，主容器div的高度不会动态增加

下面是我目前得到的结果，以及我想实现的结果。我已经能够通过用像素手动增加高度来完成第二个图像，仅仅为了说明的目的，但是我希望通过容器内容的大小自动实现这一点...当div内容增加时，主容器div的高度不会动态增加

Image1： enter image description here

镜像2： enter image description here

HTML：

<div id="top-body" style="clear:both"> 
    <div id="info"> 
    <p>Dixon Woods School of Dance was established 25 years ago in Newbold Verdon. Although lessons still take place in Newbold Verdon the main activities of the school now take place in their purpose built studios in Oadby. 
     All lessons are given under the personal supervision of the principal Michelle Dixon-Woods. The school is recognised as having exceptionally high standards, which is reflected in examination and festival results achieved by the pupils.</p> 
    </div> 
</div> 

<div id="footer1"> 
    <div id="footer-image"> 
    </div> 
</div>

CSS：

top-body { 
margin: 0 auto; 
background-color: #ffffff; 
height: auto; 
overflow: hidden; 
position: absolute; 
top: 197px; 
width: 960px; 
padding-top: 7px; 
} 

info { 
width: 327px; 
float: right; 
margin-right: 39px; 
margin-top: 14px; 
} 

#info p { 
font-size: 15px; 
font-family: "myriad pro"; 
line-height: 15px; 
text-align: justify; 
} 

#footer1 { 
width: 960px; 
height: 23px; 
} 

#footer-image { 
width: 100%; 
background-image: url('../images/footer-border1.png'); 
height: 23px; 
}

来源

2013-05-06 user1278496

你的问题是'溢出：隐藏;'' – Andrew 2013-05-06 15:23:00

溢出：隐藏; 位置：绝对;'是导致问题。 – 2013-05-06 15:25:46

谢谢你们，它确实有效。再次感谢 – user1278496 2013-05-06 15:31:12

-1

我知道表吸，而是一个快速和肮脏的方法是用100％的高度，像这样的表格单元格，以取代顶部的div：

<table height="100%"> 
<tr><td height="100%" id="top-body"> 
    <div id="info"> 
    <p>...</p> 
    </div> 
</td></tr> 
<tr><td id="footer1"> 
    <div id="footer-image"> 
    </div> 
</td></tr></table>

记得还设置高度的身体元素到100％

在CSS3中，您可以计算高度减去100％。见CSS How to set div height 100% minus nPx

来源

2013-05-06 15:32:37 geert3

尽量把DIV

#info 
    { 
    clip:auto; 
    }

来源

2013-05-27 23:02:06

当div内容增加时，主容器div的高度不会动态增加

回答

相关问题