使用任何剩餘空間在另一個div的容器底部放置固定高度div

我已經在第三方JavaScript庫（dhtmlx）中將容器定義爲單元格的內容。我想要做的是創建一個容器，它具有兩個div，其中一個在底部具有固定的高度，另一個可以具有不同的高度來佔據其餘的空間。使用任何剩餘空間在另一個div的容器底部放置固定高度div

已經在這裏搜索，並試圖做一些建議，但頂部空間似乎忽略了填充底部並顯示底部固定div後面的內容。我如何設置風格以允許發生？

var sContainer = "<div id='paging_containerDetails_{0}' style='position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: #B5CDE4 1px solid;'>".format(oTabProps.ID); 
    sContainer += "<div id='gridDetails_{0}' style='position: relative; padding-bottom: 30px; width:100%; height:100%; background-color:white;overflow:auto;'></div>".format(oTabProps.ID); 
    sContainer += "<div id='recDetailsinfoArea_{0}' style='position: absolute;bottom: 0; overflow: auto;width:100%;height:30px;'></div>".format(oTabProps.ID); 
    sContainer += "</div>";

來源

2015-10-15 aggaton

您可以使用這樣的事情：

.top{height: calc(100% - 100px); width: 100%; background-color: red;}

的calc()會讓你設置的底部<div>

見小提琴的100% - the height：

https://jsfiddle.net/ff0k9j45/5/

來源

2015-10-15 19:56:20

謝謝，這如果我投入，似乎在ie11上工作身高：calc（100％ - 30px）而不是身高：100％，但它似乎不適用於ie8。任何想法如何爲ie的早期版本做到這一點？ – aggaton

我不確定，我所有的站點都會阻止ie8，所以我不太清楚。我可以告訴你雖然ie10和以下版本在1月份不再支持微軟，所以它可能不是什麼大問題:) –

我希望我能做到這一點:)但是我有嚴格的公司政策的MS服務器上的用戶沒有從盒子裏的東西中升級任何東西......使用盒子大小和填充底部嘗試不使用。 – aggaton

回答

相關問題