1

私は次のものを持っています：

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

＃modal-bodyを調整して、使用可能な残りのスペースを埋めるために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;
  }
});

この問題は、＃modal-bodyに「outerHeight」プロパティを設定できないため、独自のパディング、境界線、マージンなどを考慮して計算する必要があるという事実に起因しています。

とにかく、上記の機能はほとんど機能します。私の2つの質問は次のとおりです。

  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 に答える