javascript - 无法调整div的高度

Question

我在泡菜。

I'm working on a layout ，我需要主 div 来调整窗口大小，主要是 来让中间的 div 在调整大小时制作滚动条。它目前充当表格单元格，这就是为什么它强制自己变得更高而不是使用滚动条的原因。它位于一个包含 div 中，以努力避免这样做。

<div id="ALL">
    <div id="VOLTRON">
        <div id="MAINSIDEBAR">ok</div>
        <div id="CONTENT">
            <div id="TICKER">please</div>
            <div class="WRAP">
                <div id="POSTSGOHERE">
                    <p>Lorem ipsum dolor sit amet, ...</p>
                </div>

                <div id="RIGHTSIDEBAR">WELL THEN.</div>
            </div>
        </div>

    </div>
</div>

我求助于 Jquery，虽然我找到了这个东西的代码，但它不起作用。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
    $('#ALL') .css({'height': (($(window).height()))+'px'});
    $(window).resize(function(){
        $('#ALL') .css({'height': (($(window).height()))+'px'});
    });
});
</script>

我试过设置最大高度，我试过将它设置为 vh 而不是百分比，我试过包含它，但我觉得我自己已经在这个难题上耗尽了相当多的时间终于得到帮助。

Here is the entire code ，以防万一。我确信我这样做的方式是它不起作用的原因。

那么，有什么办法可以解决这个问题吗？为什么我尝试的方法不起作用？

编辑: 我需要再次说明这一点:我希望整个“表格”只适合窗口，但紫色的 div 应该滚动。问题是，虽然我将它设置为 overflow-y: scroll;，但它只是改变了整个容器的大小。整个表刚好超过窗口以补偿溢出。

Answer 1

您的代码看起来不错，只是您看不到它，因为它占用了窗口的确切大小。如果您减去一点并将 overflow-y:scroll 添加到 #ALL 而不是容器

，您会更好地看到它:

#ALL {
    background-color: red;
    max-width: 100%;
    max-height: 100%;
    overflow-y: scroll;
}

$(function () {
    $('#ALL').css('height', $(window).height()-50 + 'px');
    $(window).resize(function () {
        $('#ALL').css('height', $(window).height()-50 + 'px');
    });
});

HERE IS A DEMO

已编辑:根据您的编辑，我知道这会完全影响您的布局，但如果您只想让紫色的移动，唯一对我有用的是删除表格单元格显示并将高度设置为容器而不是全部，并仅向其添加滚动条:

#ALL {
    background-color: red;
    max-width: 100%;
    max-height: 100%;
}
#POSTSGOHERE {
    background-color: purple;
    max-height: inherit;
    overflow-y: scroll;
}

$(function () {
    $('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
    $(window).resize(function () {
        $('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
    });
});

I updated the demo