jquery - Bootstrap 流体布局和全高 div

Question

我目前正在使用 Twitter 的 Bootstrap 并试图获得一些具体的东西但无法让它工作......

我想要一个带有导航栏、侧边栏、内容和页脚的流畅布局。 另外，我想要一个全高内容内的 div。

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="brand" href="#">Navbar</a>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    <li class="nav-header">Sidebar</li>
                </ul>
            </div><!--/.well -->
        </div><!--/span-->

        <div class="span9">
            <div class="hero-unit">
                <h1>Hero Unit</h1>
            </div>

            <div class="row-fluid">
                <div class="span12">
                    <div id="fullHeight" style="background-color: red">
                        <p>Full height here</p>
                    </div>
                </div><!--/span-->
            </div><!--/row-->
        </div><!--/span-->
    </div><!--/row-->

    <hr>

    <footer>
        <p>&copy; Company 2013</p>
    </footer>

</div><!--/.fluid-container-->

CSS

body {
        padding-top: 60px;
        padding-bottom: 40px;
    }
    .sidebar-nav {
        padding: 9px 0;
    }

    @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
            float: none;
            padding-left: 5px;
            padding-right: 5px;
        }
    }

这是 jsfiddle 向您展示我拥有/想要的东西: http://jsfiddle.net/2nuvP/

有人可以帮我解决这个问题吗？

提示:我不确定仅使用 CSS 是否可行，我接受 JS/jQuery 解决方案；) 此外，如果您的解决方案需要一些 HTML 修改，这也没什么大不了的......

Answer 1

这里主要使用 jQuery 解决您的问题。

http://jsfiddle.net/uyEuN/4/

JavaScript

function resolveFullHeight() {
    $("#fullHeight").css("height", "auto");

    var h_window = $(window).height(),
        h_document = $(document).height(),
        fullHeight_top = $("#fullHeight").position().top,
        est_footerHeight = 112;

    var h_fullHeight = (-1 * (est_footerHeight + (fullHeight_top - h_document)));

    $("#fullHeight").height(h_fullHeight);
}

resolveFullHeight();

$(window).resize(function () {
    resolveFullHeight();
});

除了在导航栏下方添加这个 div 之外，我大部分时间都保留了 HTML。

<div class="spacer-fluid-60"></div>

CSS 包含用于设置 .spacer-fluid-60 div 高度的新规则， 我还删除了 body 元素的 padding-top 规则。调查 jsfiddle 以获得完整的详细信息。

在 HTML 中，我添加了一些重复的填充段落，并将其中的大部分注释掉了。根据需要取消对它们的注释，以尝试改变 #fullHeight 元素中的内容高度，看看它是否仍然按照您的预期运行。到目前为止，我所做的最少测试表明这会奏效。

注意:添加一些throttling减少滚动时函数被调用的次数。