Jquery 如何通过引导将页面划分为3个部分

我正在尝试做一个主题布局。它将有一个顶部栏、一个内容栏和一个底部栏。因此，任何一个都不能与另一个重叠

以下是我的尝试：

HTML：

<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container-fluid"> <a class="navbar-brand" href="#">Brand</a>

    </div>
</nav>

<!-- Content -->
<div class="content">

</div>

<nav class="navbar navbar-fixed-bottom navbar-inverse" role="navigation">
    <div class="container-fluid">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a>

            </li>
            <li><a href="#">Link</a>

            </li>
        </ul>
    </div>
</nav>

此页面将仅具有水平滚动。所以我希望

.content

覆盖所有的空闲空间，减去条空间。并且不重叠条

---

有什么想法吗？

导航栏是固定的，因此重叠。您需要将

navbar固定顶部

和

navbar固定底部

更改为

navbar默认值

，或者将其添加到CSS中

.navbar, .content{position:relative}

.navbar, .content{position:relative}