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/

事情是当屏幕分辨率改变时动态改变侧边栏内容(右侧列)的高度。它在刷新 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