0

我目前正在使用 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 修改，这没什么大不了的......

4

1 回答 1

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

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

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

于 2013-02-28T06:30:35.287 回答