javascript - jQuery:在更改窗口大小时更改div的高度

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

})

fiddle :http://jsfiddle.net/JRUnr/33/

事情是在屏幕分辨率改变时动态改变侧边栏内容(右侧列)的高度。它在 reshreshing fiddle 之后起作用但是在更改窗口大小时:按钮覆盖文本:(一些帮助表示赞赏:)

Answer 1

神奇的是计算需要在调整大小处理程序中进行。在你的情况下，你只计算一次高度(在 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