1

私は研究を続けてきましたが、最終的にこれを思いつきました：

var buttonsHeight = $(".buttonsContainer").height();
var headerHeight = $(".header").height();
var mainWindowHeight = $(window).height();
var sideBarContentHeight;
var sideBarContentHeight =  mainWindowHeight - buttonsHeight - headerHeight - 20;

$('.asideContent').height(sideBarContentHeight);

$( window ).resize(function(){

$('.asideContent').css('height', sideBarContentHeight);

})

フィドル: http://jsfiddle.net/JRunr/33/

問題は、画面の解像度が変更されたときに、サイドバー コンテンツ (右側の列) の高さを動的に変更することです。フィドルを再構築した後は機能しますが、ウィンドウサイズを変更すると、ボタンがテキストをカバーします:( 助けていただければ幸いです:)

4

4 に答える 4

1

サイズ変更ハンドラー内で高さを計算する必要があります。これを試して、

$( window ).resize(function(){
    var buttonsHeight = $(".buttonsContainer").height();
    var headerHeight = $(".header").height();
    var mainWindowHeight = $(window).height();
    var sideBarContentHeight;
    var sideBarContentHeight =  mainWindowHeight - buttonsHeight - headerHeight - 20;
    $('.asideContent').css('height', sideBarContentHeight);

});
于 2013-09-26T11:42:08.097 に答える
0

すべての要素を再計算する必要があります

function onResize() {
 var buttonsHeight = $(".buttonsContainer").height();
 var headerHeight = $(".header").height();
 var mainWindowHeight = $(window).height();
 var sideBarContentHeight;
 var sideBarContentHeight =  mainWindowHeight - buttonsHeight - headerHeight - 20;
 $('.asideContent').height(sideBarContentHeight);
 $('.asideContent').css('height', sideBarContentHeight);
};

$(document).ready(function() {
 onResize();

 $(window).on('resize', function() {
  onResize();
 });
});
于 2013-09-26T11:41:48.580 に答える
0

フィドルJSFiddleを更新しました

    var buttonsHeight = $(".buttonsContainer").height();
var headerHeight = $(".header").height();
var mainWindowHeight = $(window).height();
var sideBarContentHeight =  mainWindowHeight - buttonsHeight - headerHeight - 20;

$('.asideContent').height(sideBarContentHeight);

$(window).resize(function(){
     buttonsHeight = $(".buttonsContainer").height();
     headerHeight = $(".header").height();
    mainWindowHeight = $(window).height();
     sideBarContentHeight =  mainWindowHeight - buttonsHeight - headerHeight - 20;
    $('.asideContent').css('height', sideBarContentHeight);

})
于 2013-09-26T11:41:59.370 に答える