0

正在构建一个带有侧边栏的 web 应用程序,我希望侧边栏始终像这样安装在视口中 图像1

并且在应用程序处于全屏模式时也适合视口。我怎样才能用 jquery 实现这一点。我尝试从文档的高度中减去标题的高度

$(document).ready(function() {
        var bodyheight = $('body').height();
        $(".app-sidebar").height(bodyheight);
    });

    // for the window resize
    $(window).resize(function() {
        var bodyheight = $(document).height();
        var header = $('.app-north').innerHeight();
        $(".app-sidebar").height(bodyheight - header);
    });
4

1 回答 1

1

为什么不使用 css position:fixed 并给侧边栏一个 min-height: 100%。使用 jQuery 或 javascript 来调整窗口大小时的 div 大小会非常不稳定。无论如何,要获得视口的高度,您应该使用$(window).height而不是document. 这是一个应该起作用的功能:

var prev,
  const_header_height = $('.app-north').innerHeight(),
  $app_sidebar = $('.app-sidebar'); // get the element first to avoid hitting the DOM each call of resize()

function resize () {
  var curr = $(window).height()
  // only resize if new height is different
  if (curr != prev) {
    $app_sidebar.height(curr - const_header_height);
    prev = curr;
  }
}

$(window).on("resize", resize)
$(document).ready(resize)
于 2013-01-26T00:40:36.647 回答