Question

通过Bootstrap构建帮助系统。无论菜单/内容大小如何，左侧导航都应填充垂直空间。

此外，当页面内容很少时，页脚需要粘到底部，但是当内容增加时（超过视口高度），页脚应该被推开。

基本布局是：

<html>
    <head></head>
    <body>
        <header></header>
        <div id="system"></div>  <!-- This is the bar above the nav and content that shows the breadcrumbs -->
        <main id="content">
            <div class="row>
                <section></section> <!-- Contains the topic content -->
                <aside></aside>     <!-- Contains the left navigation. Floated left. 
                                    Needs to fill vertical space above/below it -->
            </div>
        </main>
        <footer></footer>           <!-- This needs to stick to bottom of page when /
                                    there is little content, and should be pushable /
                                    by longer (taller than the viewport) content -->
    </body>
</html>

Answer 1

使用jQuery

如果滚动添加固定为页脚

$(document).ready(function() {
    if ($("body").height() > $(window).height()) {
        $('footer').css({
            'position':'fixed',
            'bottom':'0',
            'width':'100%'
        })

        $('body').css('padding-bottom','20px')
    } else {
        $('footer').css({
            'position':'static',
            'bottom':'auto',
            'width':'100%'
        })
        $('body').css('padding-bottom','0px')
    }
});

如何拉伸浮动元素以填充视口中的垂直空间？

1 个答案: