将div放在导航栏下方,不要重叠内容

Question

我的问题是我修改了我的网页顶部的导航栏,它包括侧边和顶边.在此导航栏下方,我想设置一个可滚动的容器.

让我说我正在使用Bootstrap 3.2.0来布局网站.

问题在于,由于我的导航栏的边距,我想要放在下面的内容与导航栏重叠,并且它显示在导航栏旁边.为了更好地解释这一点,我提供了我的代码和一个实例:

更新:从我的角度来看,我注意到一些东西增加了一点困难,而且身体有一个规则来隐藏滚动并且不允许向上/向下滚动:

我想滚动内容"Hi World",显然整个内容从第一个单词显示:"BEGIN"到"END"单词滚动.

body {
   overflow: hidden;
}

http://www.bootply.com/TZebvFEl3T(我使用所需的restictions更新了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与导航菜单下面的内容,现在内容不重叠.

问题是我在页面上也有一个固定的页脚,如果我调整窗口大小,滚动不完全可见,我无法到达列表的末尾,因为页脚重叠,所以不让我看到滚动的结尾,如果我删除页脚显然这是可见的.

但我必须调整我的滚动从顶部导航菜单的底部开始,并在页脚顶部结束,如示例中所示,当您调整浏览器大小时会出现问题.

我想我正在为我的容器寻找这样的东西,请看下一个链接:

页眉和页脚之间的内容为100%

这是我的代码:

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;
}

对我而言,这是我一直在寻找的解决方案.

Answer 1

从Bootstrap文档:

需要正文填充固定导航栏将覆盖您的其他内容,除非您在<body>的顶部添加填充.尝试自己的价值观或使用下面的代码段.提示:默认情况下,导航栏高50像素.

所以只需添加你的身体填充:

body
{
    padding-top: 70px;
}

如果您不希望您的身体滚动到导航栏后面,请将CSS更改为使用填充而不是边距:

.my-own-style {
    padding-left: 37px;
    padding-top: 37px;
}

Answer 2

我真的不喜欢为了推送内容而必须添加那些元素.这就是定位旨在处理的问题.这样做的最好方法是首先在身体顶部添加填充,正如@davidg在他的回答中所述.此外,要将导航栏移动到位,请不要使用边距.而是使用顶部,左侧和右侧属性.navbar-fixed-top类已将位置设置为fixed,因此您无需提供任何position属性值.我还将容器流体类添加到div中(以便在内部获得一些填充)和自定义类可滚动以设置overflow属性.

DEMO

CSS:

html, body {
  height: 100%; /*Fixes the height to 100% of the viewport*/
}
body {
  padding-top: 87px; /*50px for the height of the navbar + 37px for the offset*/
  padding-bottom: 50px; /*50px for the height of the bottom navbar*/
}
.navbar-offset {
    top: 37px; /*Offsets the top navbar 37px from the top of the viewport*/
}
.container-fluid.scrollable {
  height: 100%; /*Sets the scrollable area to 100% of the viewport*/
  overflow: auto; /*Allows the scrollable area to have a scrollbar based on the height of its content*/
  background: #ccc;
}

HTML:

<nav class="navbar navbar-default navbar-fixed-top navbar-offset">
    <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 scrollable">
    <p>BEGIN</p>
    <p>Hi World</p>

    ...

    <p>END</p>
</div>


<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-calendar"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-comment"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
    </ul>
</nav>