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

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

html css twitter-bootstrap

Html 如何拉伸浮动元素以填充视口中的垂直空间？,html,css,twitter-bootstrap,css-float,Html,Css,Twitter Bootstrap,Css Float,通过引导构建帮助系统。无论菜单/内容大小如何，左侧导航都应填充垂直空间此外，当页面内容很少时，页脚需要粘到底部，但当内容增加（超过视口高度）时，页脚应该被推开这是一个设置基本布局为： <html> <head></head> <body> <header></header> <div id="system"></div> <!-- This

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

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

这是一个设置

基本布局为：

<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>


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