【发布时间】：2014-12-11 16:30:03
【问题描述】：
我的问题是我在网页顶部修复了一个导航栏，它包括侧边距和顶部边距。在这个导航栏下面，我想设置一个可滚动的容器。
我说我正在使用 Bootstrap 3.2.0 来布置网站。
问题是由于我的导航栏的边距，我想放在下面的内容与导航栏重叠，并且显示在导航栏旁边。为了更好地解释这一点，我向您提供了我的代码和一个活生生的例子：
更新：从我的角度来看，我注意到一些事情会增加一点难度，那就是 body 有一个规则来隐藏滚动并且不允许向上/向下滚动：
我只想滚动内容“Hi World”，显然整个内容从第一个单词显示：“BEGIN”到“END”单词滚动。
body {
overflow: hidden;
}
http://www.bootply.com/TZebvFEl3T（我用所需的限制更新了 bootply 代码）。
<nav class="navbar navbar-default navbar-fixed-top my-own-style">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</nav>
<div>
<p>BEGIN</p>
<p>Hi World</p>
Hi World
<p>Hi World</p>
<p>Hi World</p>
Hi World
<p>Hi World</p>
<p>Hi World</p>
Hi World
<p>Hi World</p>
<p>Hi World</p>
Hi World
<p>Hi World</p>
<p>Hi World</p>
...
<p>END</p>
</div>
更新 2：
用你的答案和我自己的研究进行实验，我取得了一些对我来说很接近的东西，我有一个 div 滚动，其内容位于导航菜单下方，现在内容不会重叠。
问题是我在页面上也有一个固定的页脚，如果我调整窗口大小，滚动不是完全可见的，我无法到达列表的末尾，因为被页脚重叠，所以不让我看看卷轴的结尾，如果我删除页脚，这显然是可见的。
但是我必须调整我的滚动以从顶部导航菜单的底部开始，并在我的页脚顶部结束，如您在示例中看到的那样，当您调整浏览器大小时会出现问题。
我想我正在为我的容器寻找类似的东西，请查看下一个链接：
Content with 100% between header and footer
这是我的代码：
http://www.bootply.com/knJkGoEHWQ
HTML：
<nav class="navbar navbar-default navbar-fixed-top my-own-style">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</nav>
<div class="container-fluid scroll">
<p>BEGIN</p>
<p>Hi World</p>
<p>Hi World</p>
<p>Hi World</p>
<p>Hi World</p>
<p>Hi World</p>
<p>Hi World</p>
<p>Hi World</p>
<p>Hi World</p>
...
<p>END</p>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
CSS：
/* CSS used here will be applied after bootstrap.css */
body, html {
height: 100%;
overflow: hidden;
padding-top: 44px;
}
.my-own-style {
margin-left: 37px;
margin-top: 37px;
}
.scroll {
overflow: auto;
height: 80%;
padding: 0;
margin-left: 37px;
}
更新 3（解决方案）：
好吧，关于更新 2，问题很简单解决，可能我没看到。 基本上与我在主体顶部添加一个填充以将我的主容器设置在顶部导航菜单下方的方式相同，我必须执行完全相同的操作，但使用主体的底部填充将我的主容器设置在底部导航上方菜单。
此外，我将我的主容器的高度设置为 100%，这样它就会沿着包含它的整个 div 展开。
解决办法如下：
http://www.bootply.com/sazMMHNCGy
HTML：
<nav class="navbar navbar-default navbar-fixed-top my-own-style">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</nav>
<div class="scroll">
<p>BEGIN</p>
<p>Hi World</p>
Hi World
<p>Hi World</p>
<p>Hi World</p>
Hi World
<p>Hi World</p>
<p>Hi World</p>
<p>Hi World</p>
<p>Hi World</p>
...
<p>END</p>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
CSS：
/* CSS used here will be applied after bootstrap.css */
body, html {
height: 100%;
overflow: hidden;
padding-top: 44px;
padding-bottom: 25px;
}
.my-own-style {
margin-left: 37px;
margin-top: 37px;
}
.scroll {
overflow: auto;
height: 100%;
padding: 0;
margin-left: 37px;
}
对我来说，这是我一直在寻找的解决方案。
【问题讨论】：
标签： html css twitter-bootstrap twitter-bootstrap-3