使用jQuery動態調整div的大小

我有一個div（id="mainDiv"），如果用戶更改其瀏覽器窗口的大小，我需要動態調整其大小。我寫了下面的代碼，試圖得到這個工作，但是這似乎並沒有被設置我div的高度：使用jQuery動態調整div的大小

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script> 
    var height = $(window).height(); 
    $("#mainDiv").height(height); 
</script> 
<body> 
    <div id="mainDiv"></div> 
</body>

我不知道很多jQuery的，我會做一個明顯的錯誤？

來源

2013-04-08 CJH

此代碼在瀏覽器調整大小時不運行。它立即運行，永不再運行。 – js1568 2013-04-08 20:49:40

你需要把你的resize代碼放在resize函數中http://api.jquery.com/resize/也要確保它在doc準備好了 – Huangism 2013-04-08 20:49:42

當你使用百分比時，你可以很容易地使用CSS，因爲div是完整的窗口。 – 2013-04-08 20:49:45

有一些事情出錯的位置：

在您的文檔加載完成之前，您的代碼將立即執行。
您的代碼將僅在腳本的負載執行，而不是調整
你沒有設置你的mainDiv的高度 - 你設置與ID的其他元素的高度：accordianMain（但我米猜你知道這一點）。

您需要處理瀏覽器調整大小事件以等待瀏覽器調整大小，然後獲取窗口的尺寸並相應地應用。

var $win = $(window); 

$win.on('resize',function(){ 
    $("#mainDiv").height($win.height()); 
});

你可能想要做的就是等待一個調整大小來完成，以通過增加超時，使其不火過於頻繁：你會通過處理window.resize事件鏈接纔可這個做到這一點還有：

var timer, 
    $win = $(window); 

$win.on('resize',function(){ 
    clearTimeout(timer); 
    timer = setTimeout(function(){ 
     $("#mainDiv").height($win.height()); 
    }, 500); 

});

來源

2013-04-08 20:54:42 Lewis

你需要將其包裝在一個調整大小功能：

$(window).on('resize',function(){ 
    var height = $(window).height(); 
    $("#mainDiv").height(height); 
});

雖然我要指出你這樣做很容易通過CSS來實現的：

body,#mainDiv { 
    height:100%; 
}

這更點出「它需要在一個調整大小事件包裝器」的大點，以防你想要做一些真正需要事件的邏輯。

來源

2013-04-08 20:49:45 PlantTheIdea

雖然我同意CSS是一個更好的解決方案，但不能保證高度：100％可以像這裏使用的CSS那樣工作，因爲身體可能不是窗口高度的1005。 – Lewis 2013-04-08 20:56:51

「這裏使用的CSS」......這裏沒有CSS。使用他提供的HTML，並且缺少其他CSS或元素，例如...是的，它可以工作。問題中的簡單例子就是解決方案中的簡單例子 – PlantTheIdea 2013-04-08 20:58:42

是什麼讓你認爲身體會是窗戶的100％高度？ – Lewis 2013-04-08 21:01:24

使用的事件偵聽器窗口大小調整（及你訪問使用jQuery元素之前應該等待頁面加載）：

$(function() { 
    $(window).on('resize', function() { 
    var height = $(window).height(); 
    $("#mainDiv").height(height); 
    }); 
});

來源

2013-04-08 20:50:47 js1568

是的，錯誤是使用jQuery呵呵呵

你有這樣做CSS

<body> 
    <div id="mainDiv" style="height:100%"></div> 
</body>

來源

2013-04-08 20:54:06

我使用DIV的內容和DIV頁腳在我的網頁，我將在我的js這段代碼來設置DIV內容的動態高度。

footer = $("div[data-role='footer']"); 
    content = $("div[data-role='content']"); 
    viewHeight = $(window).height(); 
    contentHeight = viewHeight - footer.outerHeight(); 
    contentHeight -= (content.outerHeight() - content.height()); 
    content.height(contentHeight);

來源

2013-04-08 20:58:14

使用jQuery動態調整div的大小

回答

相關問題