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

时间：2014-10-16 10:31:43

标签： html css css3 twitter-bootstrap twitter-bootstrap-3

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

让我说我使用Bootstrap 3.2.0布局网站。

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

更新：我注意到从我的角度来看，有些东西增加了一些困难，并且身体有一个规则来隐藏卷轴并且没有。让我们向上/向下滚动：

我想滚动内容＆＃34; Hi World＆＃34;很明显，整个内容都来自第一个单词：＆＃34; BEGIN＆＃34;到＆＃34;结束＆＃34;单词滚动。

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的滚动内容，现在内容没有重叠。

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

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

我想我正在为我的容器寻找类似的东西，请看下一个链接：

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

对我而言，这是我正在寻找的解决方案。

5 个答案:

答案 0 :(得分：8)

来自Bootstrap documentation：

  

需要身体填充固定导航栏将覆盖您的其他内容，除非您在＆lt; body＆gt;的顶部添加填充。尝试自己的价值观或使用下面的代码段。提示：默认情况下，导航栏高50像素。

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

body
{
    padding-top: 70px;
}

如果您不希望自己的身体滚动到导航栏后面，请更改CSS以使用填充而不是边距：

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

答案 1 :(得分：8)

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

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>

答案 2 :(得分：3)

您应该使用固定的div替换滚动div：

http://www.bootply.com/3UpMI5yTIA 

.scroll-pre {
  height: 100px;
  width: 100%;
  background-color: inherit;
  position: fixed;
}

和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-pre"></div>
<div class="scroll">
    <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>
       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>
       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>
       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>
       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>
       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>
       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>
       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>
       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>
       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>
       Hi World
    <p>Hi World</p>
</div>

修改

http://www.bootply.com/CKD9nrQxG5

如果你想滚动div（不在页面上），那么添加类＆＃34;滚动＆＃34;滚动div并使用以下命令更新css：

body, html {
  overflow: hidden;
  height: 100%;
}

.scroll {
  margin-top: 100px; // Same as .scroll-pre height
  overflow: auto;
  height: 100%;
}

编辑2（页脚）

http://www.bootply.com/JwmaWgvWPI

如果你想要一个页脚，策略是相同的，在bottom:0中放置一个固定的div。同样，只有将背景放置在预卷轴和页脚div上才能生效。

我已调整滚动的paddigns以让最后一项可见。

.scroll {
  margin-top: 100px;
  overflow: auto;
  height: 100%;
  padding-bottom:130px;
  margin-bottom: 30px;
}

.footer {
  position:fixed;
  bottom:0;
  height:30px;
  background:inherit;
  width:100%;
}

答案 3 :(得分：3)

您可以通过将边距更新为填充来简单地修复此问题..并更新div，如下所示..

<强> HTML 

<div id="content">....</div>

<强> CSS 

#content{
  position:absolute;
  top:100px;
}

<强> Demo

答案 4 :(得分：0)

您可以尝试以下代码：

HTML代码： 

<nav class="navbar navbar-default">
.......
</nav>

CSS代码： 

.navbar{
border-radius: 0;
}
相关问题
最新问题