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

Question

以下是我目前得到的以及我想要实现的目标。第二个图像我能够通过手动增加高度和像素来实现，但我希望这可以从容器内容的大小自动实现......

IMAGE1：

图像2：

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;
}

Answer 1

尝试把div

#info
    {
    clip:auto;
    }

Answer 2

我知道桌子很糟糕，但是快速而又脏的方法是用100％高度的表格单元替换top-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>

请记住还要将body元素的高度设置为100％

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