javascript - 如何使用 jQuery 设置内容高度 – 在小窗口尺寸下 chop

Question

我无法让它发挥作用。目前，它正在将section[role=“main”]的大小调整为正确的高度，但是当您将窗口大小调整为较小的尺寸时，它会被切断。

<script type="text/javascript">
    $(function(){
        $('section[role="main"]') .css({'height': (($(window).height()))+'px'});
        $(window).resize(function(){
            $('section[role="main"]') .css({'height': (($(window).height()))+'px'});
        });
    });
</script>

我还想知道如何补偿页脚的高度？截至目前，它将页脚推离屏幕。

感谢您的帮助!

所以它应该看起来像这样，Patrick(已更新)？

    <script type="text/javascript">
        $(function(){
            $(window).resize(function(){
                var winheight = $(window).height();
                var heightMinusFooter = winheight - jQuery("#footer").height();
                $('section[role="main"]') .css({'height': heightMinusFooter+'px'});
            });
        });
    </script>

Answer 1

从窗口高度中减去页脚高度，然后应用。

$(window).resize(function(){
    var winheight = $(window).height();
    var heightMinusFooter = winheight - jQuery("#footer").height();
    $('section[role="main"]') .css({'height': heightMinusFooter+'px'});
});