DIV填充剩余高度計算

Question

我有以下幾點：

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

我正在寫一段JS來調整＃modal-body以填充剩余的可用空間。 實際上這比看起來要多：

$('#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;
  }
});

問題源於以下事實：我們無法為＃modal-body設置“ outerHeight”屬性，因此我們必須考慮其自身的填充，邊框，邊距等來對其進行計算。

無論如何，以上功能大部分都可以使用。 我的兩個問題是：

1. 有沒有更好/更簡便的方法可以做到這一點？
2. 好像是關閉了1px。 ＃modal-container有一個滾動條，因此，如果我減去一個額外的1px，它將起作用。 我想念什么？ 除了邊距，邊距和邊框之外，我還需要考慮其他什么嗎？

Answer 1

有沒有更好/更簡便的方法可以做到這一點？

就在這里。

問題源於以下事實：我們無法為＃modal-body設置“ outerHeight”屬性，因此我們必須考慮其自身的填充，邊框，邊距等來對其進行計算。

不一定，最終是正確的。 您可以使用box-sizing: border-box; ，這將強制大小調整包含邊框和填充，但不包括邊距。 因此，您仍然必須處理邊距，但這將為您節省一些工作；

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

編輯：您可以使用純CSS做到這一點； 不需要JavaScript。 看到這個演示 。 這是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*/
}

希望能有所幫助！