Html 基于窗口大小的可滚动div上的动态最大高度

尝试实现一个具有自动最大高度的div，以便当div中的列表非常长时，它不会强制整个页面滚动，而是在不使页面滚动的情况下将其高度扩展到尽可能低的位置，并且在div中有一个滚动条。目前最大高度设置为800px。这应根据浏览器视口分辨率自动设置

主要内容
这里有一些清单
这里有另一个列表，但是这个div应该有一个自动最大高度，这样当列表很长时，它不会强制整个页面滚动，而是在不使页面滚动的情况下将其高度扩展到尽可能低的位置，并且在div内有一个滚动条。目前最大高度设置为800px。这应根据浏览器视口大小自动设置。

试试这个：

jquery:

   var divHeight=$(window).height()*62/100; 
   $("divid").css("max-height",divHeight);

javascript:

   var w = window.innerWidth;
   w=w*62/100;
   document.getElementById("p1").style.maxHeight=w+"px";

---

好的，所以在你的plnkr中，我看不到你的引导col-md-x类应用于DIV（我不知道为什么？）。 但无论如何，您都希望将词缀保持在页面右侧，宽度为4列。在这种情况下，您应该检查浏览器加载时的高度和浏览器的调整大小事件，然后相应地设置最大高度。此最大高度不应包含DIV.affix的边距

代码应该是这样的：

function setMaxheight(){
    var affixEle = $(">div", ".affix").first(),
        winHeight = $(window).height();

    // If there is some margins from top or bottom, remove it like:
    // winheight -= 20;

    affixEle.css({
        'max-height' : winHeight + "px"
    });
}

$(function(){
    setMaxheight();

    $(window).resize(function(){
        setMaxheight();
    });
});

CSS应该是：

.affix > div{
    margin-top: 5px;
    overflow: auto; /*You dont need to put overflow-y or something. overflow:auto works perfectly*/
}

---

不确定你将如何实现这一点，你能更新plnkr吗？是否使用脚本，如果你在使用外部js后使用上述代码，我相信这是可行的，但只有在调整浏览器大小后，最大高度才会生效。加载时，没有可用的滚动。好的，我删除了词缀，现在最大高度在页面加载时设置得非常完美。由于某些原因，直到你在页面上做了一些事情，比如调整大小，粘贴才会生效。好了，它现在可以工作了。在您实际滚动页面或在页面上执行某些操作之前，不会应用affix类，因此调用affix>div直到那时才起作用。我使用了调用div id“scroll”的方法，而不是使用类选择器。现在它可以在页面加载时工作。谢谢你的帮助！谢谢，很乐意帮忙！！

.affix > div{
    margin-top: 5px;
    overflow: auto; /*You dont need to put overflow-y or something. overflow:auto works perfectly*/
}