jQuery - 动态 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1443465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - dynamic div height
提问by lemon
I'm trying to resize a div on pageload and window resize. The code bellow is placed before </body>, and it works fine on pageload, but does nothing on window resize. I tested the resize function with an alert, which triggers on resize, but the height remains unchanged.
我正在尝试在页面加载和窗口调整大小时调整 div 的大小。下面的代码放在 之前</body>，它在页面加载时工作正常，但在调整窗口大小时没有任何作用。我使用警报测试了调整大小功能，该警报在调整大小时触发，但高度保持不变。
<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>
update:after a long break, I've discovered what is causing the problem. I'm using a jquery script to add a styled scrollbar on the same div that is being resized. When I comment it out, everything resizes fine. I've moved the scrollbar initialization in the same function as resize, and tried any variations I can think of.. still can't get it to work.
更新：经过长时间的休息，我发现了导致问题的原因。我正在使用 jquery 脚本在正在调整大小的同一个 div 上添加样式滚动条。当我将其注释掉时，一切都会调整大小。我已经在与调整大小相同的函数中移动了滚动条初始化，并尝试了我能想到的任何变化......仍然无法让它工作。
(the #main-content div also has .scroll-pane class)
（#main-content div 也有 .scroll-pane 类）
<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>
回答by lemon
solved it!
解决了！
all it needed was removing jScrollPane before calculating the height, and re-applying it.
它所需要的只是在计算高度之前删除 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>
回答by Vegard Larsen
Note that the window resize function only fires once, after the window has been resized. It does not update during the resize operation, so if you are dragging the window border to test this, no changes will happen before you let go of the mouse button.
请注意，窗口大小调整函数仅在窗口大小调整后触发一次。它在调整大小操作期间不会更新，因此如果您拖动窗口边框来测试这一点，在您松开鼠标按钮之前不会发生任何更改。
Also, make sure you do this within $(document).ready(), like this:
另外，请确保您在 内执行此操作$(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>
Here is a working demo.
这是一个工作演示。
回答by tnypxl
Don't execute function unless the document height is less than or equal to the window height.
除非文档高度小于或等于窗口高度，否则不要执行函数。
$(function() {
if($(document).height() <= $(window).height()) {
$('#wrapper').css({ 'height': ($(window).height()) });
$(window).resize(function(){
$('#wrapper').css({ 'height': ($(window).height()) });
});
}
});
I had issues where the content would flow outside of the div.
我遇到了内容流到 div 之外的问题。
