0

以下是我目前所拥有的以及我想要实现的目标的截图。第二个图像我已经能够通过手动增加像素的高度来完成，但我希望这可以从容器中内容的大小自动实现......

图片1： 在此处输入图像描述

图片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;
}
4

2 回答 2

0

试着把 div 

#info
    {
    clip:auto;
    }
于 2013-05-27T23:02:06.413 回答
-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>

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

在 CSS3 中，您可以将高度计算为 100% 减去一些东西。请参阅CSS 如何设置 div 高度 100% 减去 nPx

于 2013-05-06T15:32:37.660 回答