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/

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

4

4 回答 4

2

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

演示：小提琴

于 2013-09-26T11:39:31.693 回答
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 回答