Question

我无法找到实现以下内容的解决方案：假设我们有一个div（垂直侧边栏）占据视口的百分比宽度，比如说20％。在这个div里面有一些东西，如徽标，树状菜单e.t.c.我希望这个div具有浏览器视口的高度（以使其固定）。这意味着在小分辨率的情况下，div内容必须垂直缩小以适应较小的高度。我怎么能实现这一目标？您可以查看http://lyk-ag-stefan.att.sch.gr/。蓝色侧边栏对应于上面的描述。

我尝试了一些JQuery。

$(document).ready(function () {
    sheight = $(window).height();
    $('.sidebar').css("max-height", sheight);
});

不幸的是，它没有用。

谢谢

Answer 1

Div需要知道父容器的高度

CSS：

html,body{
    height: 100%;
}

.sidebar{
    border: 1px solid silver;
    width: 20%;
    height: 100%;
}

Answer 2

尝试

var _tmpResize;
jQuery(document).ready(function () {
    jQuery(".sidebar").css({
        height: jQuery(window).innerHeight()
    });
    jQuery(window).resize(function () {
        clearTimeout(_tmpResize);
        _tmpResize = setTimeout(function () {
            $('.sidebar').css({
                height: jQuery(window).innerHeight()
            });
        }, 200); // trigger resize event only once
    });
});

参见 JSFIDDLE

即使在resize事件

之后，您的侧栏也始终具有相同的视口高度

Answer 3

使用缩放属性这样的东西：

$( window ).resize(function() {
    var sidebarHeight = $(".sidebar").outerHeight();
    var windowHeight = $(window).outerHeight();
    $(".sidebar").css("zoom", (windowHeight/sidebarHeight + 0.3) );
});

垂直收缩div内容以适合某个高度

3 个答案: