1

我有以下内容：

<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，它就可以工作。我错过了什么？除了边距、填充和边框之外，我还有什么需要考虑的吗？
4

1 回答 1

6

有没有更好/更简单的方法来做到这一点？

就在这里。

问题源于我们无法为我们的#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*/
}

希望有帮助！

于 2012-10-07T18:36:08.120 回答