jQuery的：改變一個div的高度，同時改變窗口大小

我一直在研究的最終想出了這個：jQuery的：改變一個div的高度，同時改變窗口大小

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撥弄但改變窗口大小時，後一種工作方式：按鈕覆蓋文本:( 一些幫助表示讚賞:)

來源

2013-09-26 Mag

你瞄準哪個瀏覽器？您是否嘗試過在您的CSS中使用flexbox和一些響應式媒體查詢？理想情況下，您不需要使用JavaScript來完成此操作 - 調整大小，除非您消除抖動並且柔性盒對於此類事物非常有用。這裏有關柔性盒的大文章，如果你想了解它們... http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ –

嘿，包括所有瀏覽器，ie8。我寫了一些敏感的媒體查詢，但我希望它是防彈解決方案.. – Mag

但是，嘿，這是一個不錯的鏈接關於flexboxes :) – Mag

神奇的是計算需要在大小調整處理的情況發生。在你的情況，你正在計算高度只有一次（在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

來源

2013-09-26 11:39:31

你應該recalcul所有元素

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-26 11:41:48

更新您的提琴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-26 11:41:59

您應該計算調整大小處理程序中的高度。試試這個，

$(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-26 11:42:08 zahirdhada

jQuery的：改變一個div的高度，同時改變窗口大小

回答

相關問題