如何使用 jQuery 设置内容的高度 - 以小窗口大小截断

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