Jquery 垂直收缩div内容以适合特定高度

我找不到实现以下内容的解决方案：假设我们有一个div（垂直边栏），它占据了视口的百分比宽度，比如说20%。在这个div里面有一些东西，比如一个logo，一个树菜单e.t.c.我希望这个div具有浏览器视口的高度（以便将其固定）。这意味着在小分辨率的情况下，div内容必须垂直收缩以适应较小的高度。我怎样才能做到这一点？ 你可以看一看。蓝色侧边栏与上述描述相对应

我试过一些JQuery

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

不幸的是，它没有起作用

---

感谢Div需要知道父容器的高度

CSS:

试一试

请参见

---

您的侧栏将始终具有相同的视口高度，即使在使用缩放属性执行类似以下操作之后：

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

---

它不起作用。内容以小分辨率（例如800x600）进入可视视口下方@ILIAS如果内容太大而无法容纳，是否要增加容器的宽度？如果缩小内容，则会将其截断。我猜你在寻找一种“垂直响应”，在这种情况下，你必须通过@media查询计算出内容中的所有元素（字体和图像）

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
    });
});

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