固定高度容器內的兩個流體高度div

我幾乎不敢問這個問題，因爲它看起來微不足道，但是在花費了3個多小時的時間在stackoverflow和Google之後，我不得不放棄它。固定高度容器內的兩個流體高度div

在初始狀態，div#container也會包含div#list-dynamic-2，在這裏我想div#list-dynamic-2使用div#container的全高度。 Div#list-dynamic-1將被動態插入，並允許延伸至150px。一旦div#list-dynamic-1的高度達到150px，我想div#list-dynamic-2使用150px的剩餘空間。如果有人能告訴我，這只是用CSS來實現而沒有意義，並且應該用JavaScript代替，我也會很高興。（這是一個簡單的例子來展示這個問題，真正的用法是將選定的用戶移動到上面的div，並允許它使用1/2的div#container。把上面的div想象成某種購物購物車爲用戶。）

來源

2012-01-13 Bay

@詹姆斯蒙塔涅謝謝！突出顯示使其更具可讀性，我會記住下次使用它！ – Bay 2012-01-13 22:37:30

這裏是一個JavaScript的解決方案：

var iDiff = 300 - document.getElementById('list-dynamic-1').offsetHeight; 
document.getElementById('list-dynamic-2').style.height = iDiff + 'px';

然後你可以從CSS定義中刪除max-height和height爲#list-dynamic-2。

另請參閱your updated example。

對於CSS我認爲你必須calculate，但大多數瀏覽器還不支持它。

來源

2012-01-13 22:26:01 scessor

是的，我想沒有一個CSS唯一的解決方案，但嘿，你的解決方案是輝煌的，並在IE中完美地工作。謝謝！ :) – Bay 2012-01-13 22:35:37

這讓我想起jQuery UI Layout Plug-in。觀看演示：http://layout.jquery-dev.net/demos/nested_sidebars.html

來源

2012-01-13 22:23:29 JoshNaro

固定高度容器內的兩個流體高度div

回答

相關問題