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高度的新规则，我还删除了padding-top元素的body规则。调查jsfiddle以获取完整的详细信息。

在HTML中，我添加了许多重复的填充段落，并且已经将其中的大多数段落注释掉了。根据需要取消注释，以便在#fullHeight元素中使用内容高度的变化，并查看它是否仍然按照您的意图行事。到目前为止，我所做的最小测试表明这将起作用。

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

Bootstrap流体布局和全高度div

1 个答案: