0

以下は、現時点で得ているものと達成したいもののスクリーンショットです。2番目の画像は、説明のためにピクセルで高さを手動で増やすことで実現できましたが、コンテナ内のコンテンツのサイズから自動的に実現したいと思います...

画像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

私はテーブルがひどいものであることを知っていますが、次のように、トップ div を 100% の高さのテーブル セルに置き換えるのが手っ取り早い方法です。

<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 に答える