100％高度div，但是如果內容更大，則相應調整

我的網站將成爲一個單頁網站，其中5個DIV充當面板（類名稱爲.panel），適合拉伸瀏覽器窗口的全部高度和寬度。我的下面的代碼已經這樣做了，然而，我的內容可以大於.panel/browser窗口的高度。此時此內容被隱藏。即.panel DIV字面上是窗口的高度，沒有別的。如果內容中的內容大於瀏覽器窗口的高度，我需要擴展它。100％高度div，但是如果內容更大，則相應調整

如何編輯下面的代碼以添加此功能？也許添加一個類名到這個調整過的DIV，這樣我就可以相應地設計它了？

// In my plugins.js file 
function fitElements(){ 
var height=$(window).height(); 
var width=$(window).width(); 

$('.panel').css('height',height); 
$('.panel').css('width',width) 
}; 

// At the bottom of my HTML file (to call the function) 
jQuery(document).ready(function($) { 
    fitElements(); 
}); 

// My current code also adjusts on browser resize - so would need this answer to do the same 
$(window).resize(fitElements);

來源

2012-07-30 egr103

爲什麼不直接在調整大小回調函數中使用函數？ '$（window）.resize（fitElements（））;' – PeeHaa 2012-07-30 11:37:31

對不起，我不明白你的意思。你能詳細說明一下嗎？ – egr103 2012-07-30 11:50:35

您在'.resize（）'的回調中僅使用匿名函數來調用另一個函數。 – PeeHaa 2012-07-30 12:50:18

更改部分

$('.panel').css('height',height);

到

if (height > $('.panel').height) { 
    $('.panel').css('height',height); 
}

用於調整大小功能添加

到函數的開頭

來源

2012-07-30 11:37:54

感謝這一點，但它似乎打破了內容低於瀏覽器的高度的面板。這是否需要成爲其他人？ – egr103 2012-07-30 11:57:31

這隻適用於網站有「內容小於瀏覽器的高度」 – 2012-07-30 12:28:53

那麼這不適合我... – egr103 2012-07-30 13:08:35

100％高度div，但是如果內容更大，則相應調整

回答

相關問題