Question

我一直在研究最终得出这个：

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/

当屏幕分辨率发生变化时，动态更改侧边栏内容的高度（右侧列）。它重新排列小提琴后有效，但更改窗口大小时：按钮覆盖文字:( 一些帮助赞赏:)）

Answer 1

神奇的是计算需要在resize处理程序中发生。在你的情况下，你只计算一次高度（在dom准备好）然后在调整大小事件中你一次又一次地指定相同的高度

$(window).resize(function () {
    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);

}).resize()

演示：Fiddle

Answer 2

您应该计算调整大小处理程序内的高度。试试这个，

$( 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);

});

Answer 3

你应该重新计算所有元素

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();
 });
});

Answer 4

更新了您的小提琴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);

})

jQuery：更改窗口大小时更改div的高度

4 个答案: