DIV填充剩下的高度計算

Question

我有以下幾點：

<div id="modal-container"> 
    <div id="modal-body"></div> 
    <div id="modal-footer"></div> 
</div> 

我寫了一塊JS的調整＃模體，填補可用空間的其餘部分。這實際上是更多的工作似乎比：

$('#modal-body').css({ 
    'height': function() { 
    // the amount of vertical space we have to work with. 
    // this is the height of the container (modalView) 
    var containerHeight = $('#modal-container').height(); 

    // the amount of vertical space the footer takes up 
    var footerOuterHeight = $('#modal-footer').outerHeight(); 

    // we have to also account for the vertical padding of our div 
    var paddingTop = $(this).css('padding-top').replace('px', ''); 
    var paddingBottom = $(this).css('padding-bottom').replace('px', ''); 
    var marginTop = $(this).css('margin-top').replace('px', ''); 
    var marginBottom = $(this).css('margin-bottom').replace('px', ''); 
    var borderTop = $(this).css('border-top-width').replace('px', ''); 
    var borderBottom = $(this).css('border-bottom-width').replace('px', ''); 

    return containerHeight-footerOuterHeight-paddingTop-paddingBottom-marginTop-marginBottom-borderTop-borderBottom; 
    } 
}); 

問題的事實，我們不能爲我們的＃模體的「outerHeight」屬性，因此我們必須考慮到，計算它的莖它自己的填充，邊框，邊距等。

無論如何，上面的功能大多是有效的。我的2個問題是：

1. 有沒有更好/更簡單的方法來做到這一點？
2. 它似乎是1px關閉。 ＃modal-container有一個滾動條，因爲這一點，如果我減去一個額外的1px，它的工作原理。我錯過了什麼？除了邊距，填充和邊界之外，還有其他事項我必須考慮嗎？

Answer 1

有沒有更好/更簡單的方法來做到這一點？

是的，有。

問題的事實，我們不能設置一個「outerHeight」 屬性我們＃模體，所以我們必須通過考慮 考慮它自己的填充，邊框，邊距等

來計算它的莖

這不一定，最終是正確的。您可以使用box-sizing: border-box;，這將強制大小包括邊框和填充，但不包括邊距。所以你仍然需要處理利潤率，但這會爲你節省一些工作;

#yourElement { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

編輯：爲此，您可以使用純CSS;不需要JavaScript。見this demo。這裏的基本輪廓，HTML：

<div class = "container"> 
    <div class = "fluid">Glee is very very awesome! I have margins, too!</div> 
    <div class = "fixed">Glee is awesome!</div> 
</div> 

CSS：

.container { 
    height: 300px; /*whatever you want*/ 
    position: relative; /*necessary*/ 
} 
.fluid { 
    margin: 10px; /*just an example*/ 
    position: absolute; 
    top: 0; 
    bottom: 75px; /*equal to height of bottom fixed-height div*/ 
    right: 0; 
    left: 0; 
} 
.fixed { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 75px; /*whatever you want*/ 
} 

希望這有助於！