Question

我在泡菜中。

I'm working on a layout，我需要主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，如果有帮助的话。我确定方式我这样做是他们无法工作的原因。

那么，有什么想法来解决这个问题吗？为什么我尝试的不起作用？

编辑：我需要再次指定：我想要整个＆＃34;表＆＃34;只适合窗口，但紫色div是应该滚动的。问题是，虽然我已将其设置为overflow-y: scroll;，但它只是改变了整个容器的大小。整个表只是越过窗口以补偿溢出。

Answer 1

保持最大高度并设置

overflow:scroll;

这应该可以解决问题。

PS：还可以尝试将其添加到Wrap类。

Answer 2

您认为在全屏中将#all div显示为iframe样式吗？

喜欢这里： You can check it here

你只是错过了一行CSS。

#all 
   overflow: scroll

SASS语法

注意：请使用小写字母div选择器，不要使用大写字母，谢谢;）

Answer 3

这可能效果更好

将窗口高度放在var中所以div可以读取它，并在用户调整大小时重写var

$(document).ready(function(e) {
        var heightt = $(window).height();
        $('#ALL').css('height',heightt);
        $(window).resize(function(){
            var heightt = $(window).height();
            $('#ALL').css('height',heightt);
        });
    });

Answer 4

您的代码看起来不错，您只是看不到，因为它需要窗口的确切大小。如果您从中减去一点并将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，并仅将滚动添加到：

#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

无法调整div的高度

4 个答案: