web-dev-qa-db-ja.com

jqueryを使用してdivの高さを設定（divの高さをストレッチ）

ID header、contentおよびfooterの3つのdivがあります。ヘッダーとフッターの高さは固定されており、上下にフロートするようにスタイル設定されています。 jqueryで自動的に計算される中間のcontent高さが必要です。どうすればこれを可能にできますか？

#header {
    height: 35px;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 2;
}
#footer {
    height: 35px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    z-index: 2;
}

事前に感謝します...:)

ブラスト

jquerycsscss3
47
blasteralfred Ψ

よくあなたはこれを行うことができます：

$(function(){

    var $header = $('#header');
    var $footer = $('#footer');
    var $content = $('#content');
    var $window = $(window).on('resize', function(){
       var height = $(this).height() - $header.height() + $footer.height();
       $content.height(height);
    }).trigger('resize'); //on page load

});

ここでフィドルを参照してください： http://jsfiddle.net/maniator/JVKbR/
デモ： http://jsfiddle.net/maniator/JVKbR/show/

65
Neal

これを行う正しい方法は、古き良きCSSを使用することです。

#content{
    width:100%;
    position:absolute;
    top:35px;
    bottom:35px;
}

ボーナスは、window.onresizeイベントにアタッチする必要がないことです！ドキュメントがリフローすると、すべてが調整されます。 CSSの4行の低価格から低価格まで！

16
Shmiddty

私の頭の上から：

$('#content').height(
    $(window).height() - $('#header').height() - $('#footer').height()
);

それはあなたの言うことですか？

14
Zirak

ロード時に初期化する代わりに、次のように関数をバインドできます

$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​
2
Amol M Kulkarni
$(document).ready(function(){ contsize();});
$(window).bind("resize",function(){contsize();});

function contsize()
{
var h = window.innerHeight;
var calculatecontsize = h - 70;/*if header and footer heights= 35 then total 70px*/ 
$('#content').css({"height":calculatecontsize + "px"} );
}
0
Murat Kezli