增加 outer nth cti bsp res idt html 定位

下列代碼中navbar高度為30px，content高度需要填滿瀏覽器的剩余高度 ＜div id="body"＞ ＜div id="navbar"＞＜/div＞ ＜div id="content"＞＜/div＞ ＜/div＞ css如下： html, body { padding: 0px; margin: 0px; height: 100%; } div { padding:0px; margin:0px; } #navbar { background-color: brown; width: 100%; height: 30px; } #content { background-color: gray; width: 100%; } 方法一：通過js代碼來動態設置高度來實現

• 在JS尾部直接調用下列函數
• 在body元素的resize事件增加對下列函數的調用

本例中執行setHundredPercentHeight("content","body","navbar"); // 第一個參數為指定的對象 // 第二個參數為容器對象 // 第三個及其後的所有對象均為部署在指定對象的上方或下方的對象，即在同一個容器中需要扣除高度的對象 function setHundredPercentHeight(objId,containerId) { var length = arguments.length; var height = 0; for (var i = 2; i < length; i++) { height += $("#" + arguments[i]).outerHeight(); } $("#" + objId).height($("#" + containerId).height() - height); } 方法二：通過CSS來直接實現 #content { background-color: gray; width: 100%; position: absolute; top: 30px; bottom: 0px; } 采用絕對定位，top用來設置顯示的起始位置，通過bottom來設置最底位置。 由於絕對定位是以整個瀏覽器為坐標軸的，故該方法不適合下方還有其他元素的情況。 相對來說，第一種方法更加通用一些。

如何將div高度填滿剩余高度