當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的高度不會動態增加

回答

相關問題