我正在尝试在pageload和窗口大小上调整div的大小.下面的代码放在< / body>之前,它在页面加载上工作正常,但在窗口调整大小上什么都不做.我用一个警告测试了resize函数,它在调整大小时触发,但高度保持不变.
<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上添加一个样式滚动条.当我发表评论时,一切都调整好了.我已经将滚动条初始化与resize相同的功能,并尝试任何变化,我可以想到..仍然无法让它工作.
(#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>
解决方法
解决了！
所有它需要的是在计算高度之前删除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>
