0

少なくともヘッダーとコンテナー div を含むページがあります。ドキュメントの表示部分をカバーするためにコンテナー div の最小高さを設定したい (100% に固定したくない)

だから私は要素の高さとトップパディングとトップマージンでドキュメントの高さを取得できると思った

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

$(document).ready(function(e) {

    var h = getDocHeight();
    var hedaer = $('.header').height();
    var c = $('.container').css('height') ;
    var m = $('.container').css('padding-top') ;
    var p = $('.container').css('margin-top') ;
    var n = parseInt(h) -  parseInt(c) -   parseInt(m) - parseInt(p) - parseInt(hedaer) ;
    var n = n +  parseInt(c)   ;
    $('.content').css('min-height' , n+'px');

});

しかし、私は常に多かれ少なかれコンテナ内に独自の高さとパディングとマージンを持つ他の多くの要素があり、それらについて考えるのは頭痛の種になります

これを行う簡単な方法はありますか？

4

1 に答える 1

1

あなたが何を望んでいるのか正確にはわかりません.ターゲットにしているブラウザによっては私の答えが合わないかもしれませんが、display: boxが解決策になるかもしれません.

<div class="container">
  <div class="header">blue</div>
  <div class="content">red</div>
</div>

とcss

.container {
  /*create a vertical box*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /*ensure it takes of all available width and height in my fiddle :-D */
  position: fixed;
  top:0; bottom: 0; left: 0; right: 0;
}
/*so that we see something*/
.header, .content {background: blue;margin: 20px;padding: 40px;}
.content {
  margin: 20px;
  padding: 40px;
  background: red;
  /*this div will have all available height in his parent, 
    minus what's already taken, with the beauty of box-flex */
  -webkit-box-flex: 1;
}

... まだ非常に不安定でサポートされていない仕様ですが、言及する価値があると思いました。ここで（クロムまたはサファリを使用して）実際に動作しているのを見ることができますhttp://jsfiddle.net/S6F3S/1/

于 2012-09-22T19:17:07.230 に答える