Question

我在150px高度的标题左下方有一个菜单，我试图让菜单填充屏幕的剩余空间，而不需要滚动条。

目前我有以下脚本来减去div中的菜单：

$(document).ready(function(){
    $(window).resize(function(){
        $('#left_menu').height($(window).height() - 150 + 'px');
        $('.inner_contentwrapper').height($(window).height() - 150 + 'px');
    });
});

当我刷新页面时，菜单仍然拉得太远，但是如果我打开萤火虫并关闭它，两个div会调整，滚动条会消失。

有人知道如何在页面加载时运行吗？

Answer 1

您可以尝试更改不需要滚动条的div的css。像这样

$('#left_menu').css('overflow', 'visible')

Answer 2

您可以根据窗口大小而不是文档大小（可能会比窗口大）来确定新大小。

$(document).ready(function(){
  $(window).resize(function(){
   $('#left_menu').height($(window).height() - 150 + 'px'); // why are you subtracting 150? might want to remove that...
   $('.inner_contentwrapper').height($(window).height() - 150 + 'px');
  });
})

Answer 3

在你打开firebug b / c窗口正在调整大小之后，它正在工作。在您的代码中，当文档准备就绪时，您实际上从未调用过调整大小。我想你真的想要：

var reHeight = function(){
  $('#left_menu').height($(document).height() - 150 + 'px');
  $('.inner_contentwrapper').height($(document).height() - 150 + 'px');
}
$(document).ready(function(){
  $(window).resize(reHeight);
  reHeight();
});

调整div的大小以填充100％的屏幕，而不是滚动条

3 个答案: