爲動態內容自動調整div的大小

我希望有人可以幫我解決CSS問題。我正在使用JavaScript將其他行添加到工作正常的表中，但是當添加新行時，我的頁面不會展開，這意味着內容在頁面消失時變得不可見。爲動態內容自動調整div的大小

這裏是我的網頁上的簡化版本：

<div class="wrapper" > 
    <section id="main" class="column"> 
    Expanding table code here. 
    </section> 
</div>

我也有下面的CSS：

.wrapper { 
width:1200px; 
overflow:hidden; 
margin:0 auto; 
border:1px solid #999; 
border-bottom:2px solid #999; 
} 

section#main { 
width: 77%; 
min-height: 500px; 
float: left; 
margin-top: -2px; 
}

我已經嘗試添加溢出：隱藏;到主要部分的CSS，因爲我認爲這可能工作，但它沒有。如果我刪除主要部分，那麼它工作正常，但我需要這個，因爲我的包裝div中有其他內容。

任何幫助將不勝感激，因爲這是讓我瘋狂！

感謝提前:)

來源

2012-11-30 mckeegan375

您希望瀏覽器窗口變大？ –

簡化的案件工作正常http://jsfiddle.net/gaby/nhGnE/請張貼小提琴，展示問題.. –

@ GabyakaG.Petrioli，啊是的！我正在刪除我的評論。 – Sparky

[編輯：有人向我指出，該OP已經在使用浮動清除的方法的意見。在這裏留下我的答案，雖然它可以幫助有類似問題但沒有結算css的人。]

這是因爲你是浮動的section#main。浮動區域需要清除div（或浮動清除css），因爲它們本身並不實際佔用垂直空間。你可以這樣說：

<div class="wrapper" > 
    <section id="main" class="column"> 
    Expanding table code here. 
    </section> 
    <div style="clear: both;"></div> 
</div>

的<div style="clear: both;"></div>是傳統的方式做到這一點，但你可能要考慮這裏所描述的新方法：http://www.quirksmode.org/css/clearing.html

來源

2012-11-30 23:15:48

OP **是**正在做其中一種替代方法..設置包裝爲'overflow：hidden' –

@ GabyakaG.Petrioli，ha！好點子。沒有注意到。 –

嗨李本。感謝小費，也感謝其他海報！我必須承認，雖然我確實嘗試了你的CSS，但我對CSS的評價並不高，但兩者都不適合我。我找到的一個解決方案是添加溢出：auto;到主要部分，唯一的問題是它會產生新的內容的滾動條而不是展開整個部分。如果你有更多的建議，我會樂意給他們一個。謝謝：） – mckeegan375

爲動態內容自動調整div的大小

回答

相關問題