jQuery - 動態div高度

我想調整頁面加載和窗口大小的div。下面的代碼位於</body>之前，它在頁面加載時工作正常，但在窗口大小調整時不做任何事情。我用一個警報測試了resize函數，這會觸發調整大小，但高度保持不變。jQuery - 動態div高度

<script type='text/javascript'> 
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 

    $(window).resize(function(){ 
     $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 
     alert('resized'); 
    }); 
</script>

更新：長時間的休息之後，我發現是什麼原因造成的問題。我正在使用jquery腳本在正在調整大小的同一個div上添加一個樣式化的滾動條。當我評論它時，一切正常。我已經調整了與調整大小相同的功能的滾動條初始化，並嘗試了任何我能想到的變化..仍然無法實現它的工作。

（＃的主要內容股利也有.scroll窗格類）

<script type='text/javascript'> 
$(function(){ 
    $('#main-content').css({'height':(($(window).height())-361)+'px'}); 
    $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15}); 

    $(window).resize(function(){ 
      $('#main-content').css({'height':(($(window).height())-361)+'px'}); 
    }); 
}); 
</script>

來源

2009-09-18 lemon

解決了！

所有需要的是在計算高度之前刪除jScrollPane並重新應用它。

<script type='text/javascript'> 
$(function(){ 
    $('.scroll-pane').css({'height':(($(window).height())-361)+'px'}); 
    $('#main-content').jScrollPane({scrollbarWidth:15, scrollbarMargin:15}); 

    $(window).resize(function(){ 
      $('.scroll-pane').jScrollPaneRemove(); 
      $('#main-content').css({'height':(($(window).height())-361)+'px'}); 
      $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15}); 
    }); 
}); 
</script>

來源

2009-10-17 10:16:50 lemon

嘿，我試圖在我的應用程序中爲div創建動態高度，並使用您的代碼（我剛剛刪除了關於滾動窗格的stuf）。 :)好的解決方案。 – user1080533 2012-01-27 23:42:27

'Uncaught TypeError：$（...）。jScrollPane不是函數'...什麼是'jScrollPane'？它的插件？ – KingRider 2017-04-24 12:15:45

注意，窗口大小後的窗口大小調整功能只能觸發一次。它在調整大小操作期間不會更新，因此如果您拖動窗口邊框來測試此操作，則在釋放鼠標按鈕之前不會發生任何更改。

此外，請確保你這樣做內$(document).ready()，就像這樣：

<script type='text/javascript'> 
$(function() 
{ 
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 

    $(window).resize(function(){ 
     $('#main-content') .css({'height': (($(window).height()) - 361)+'px'}); 
     alert('resized'); 
    }); 
}); 
</script>

這裏是一個working demo。

來源

2009-09-18 09:40:49

感謝澄清這個問題，但我仍然沒有解決問題。當我使用你的代碼時，尺寸調整不適用於加載或調整大小時，。我不知道爲什麼，因爲你的例子完美無缺！如果你有任何想法可能會干擾，請回復.. – lemon 2009-09-25 12:21:33

@lemon，你在IE中測試這個？我遇到過在IE中使用CSS高度方法調整div大小的問題 - 我認爲解決方案是爲div定義默認高度。 – 2009-09-25 17:03:14

窗口調整大小事件根據瀏覽器以不同的時間間隔觸發。對於Firefox，它會根據可用資源對事件進行限制，對於Safari來說，它會以大約100倍的間隔定期觸發它們， 200毫秒，取決於行動（它類似於Firefox的模式，但火災頻率更低）。 – eyelidlessness 2009-10-17 09:12:49

除非文檔高度小於或等於窗口高度，否則不要執行函數。

$(function() { 
    if($(document).height() <= $(window).height()) { 
    $('#wrapper').css({ 'height': ($(window).height()) }); 
    $(window).resize(function(){ 
     $('#wrapper').css({ 'height': ($(window).height()) }); 
    }); 
    } 
});

我有問題，其內容會流到div的外面。

來源

2011-01-24 04:42:28 tnypxl

jQuery - 動態div高度

回答

相關問題