如何使流動文本擴展並適合div而不指定高度

我有文本需要在body中的div框內流動的結構。但似乎我不能得到它的工作。也許我正在做一些錯誤的位置：標籤？如何使流動文本擴展並適合div而不指定高度

，這就是我希望做到：http://oi58.tinypic.com/332njm9.jpg使文本不斷得到增加（更多或更少），它使底部完好無損，並相應地調整大小的DIV。現在我已將#bodyContainer設置爲height：300px;

#bodyContainer { width:1024px; height:300px; margin:auto; background-color:#f4f3e7; padding-top:20px; }

但我不想這樣做，因爲會有很多頁面不同的文字量。

感謝萬，乾杯。

來源

2014-03-27 Geeky Gaj

更改#bodyContainerheight到auto。像這樣：JSFiddle

來源

2014-03-27 08:44:52

工作！看到這個教程：http：//pixelsvsbytes.com/blog/2012/02/this-css-layout-grid-is-no-holy-grail/，你回答了一分鐘。謝謝。 –

所有你需要做的就是添加min-height。所以用最小高度替換高度屬性。你完成了。

來源

2014-03-27 07:56:04

當我將該標籤添加到CSS時，它看起來像這樣：http://jsfiddle.net/Tf5Z8/1/黃金背景減少。我不想要。我希望#sidebarLeft和#sidebarRight嵌套在#bodyContainer中，當文本在#sidebarLeft和#sidebarRight內增加或減少時，＃bodyContainer會自動調整爲高度。 –

更新：做到這一點：http://jsfiddle.net/Tf5Z8/2/完美。添加位置：絕對;在＃bodyContainer標記中，但由於我的網站位於以margin：auto;整個#bodyContainer塊移動到屏幕的左邊緣。 –

如果使用絕對位置沒有任何問題，請嘗試使用此方法。將relative的位置改爲#bodyContainer和absolute的位置改爲#sidebarLeft，然後float:rightsidebarRight。勾選此fiddle

CSS改變

#bodyContainer { 
    width:1024px; 
    min-height:100px; 
    margin:auto; 
    background-color:#f4f3e7; 
    padding-top:20px; 
    position:relative; 
    overflow:hidden; 
} 

#sidebarLeft { 
    height:100%; 
    width:360px; 
    background-color:#FFF; 
    margin-left:30px; 
    margin-bottom:20px; 
    position:absolute; 
    top:20px; 
    left:0 
} 
#sidebarRight { 
    height:100%; 
    width:634px; 
    float:right; 
}

來源

2014-03-27 08:35:28 James

好..使用此左邊欄的高度將是身體容器的高度。所以即使右側邊欄中的內容增加。左側杆的高度將與右側杆相同。 – James

如何使流動文本擴展並適合div而不指定高度

回答

相關問題