将div放在导航栏下方，不要与内容重叠 [英] Put div below navigation bar and don't overlap content

问题描述

我的问题是，我在网页顶部固定了一个导航栏，它包含边缘和顶部。在这个导航栏下面，我想设置一个可滚动的容器。

让我说我使用Bootstrap 3.2.0来布置网站。

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

更新：我注意到有些东西增加了一点点从我的角度来看这很困难，而且它的主体有一个隐藏滚动条的规则，并且不会让滚动向上/向下滚动：

我只想滚动内容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 =＃>主页< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li class =divider-vertical>< / li> 
< li>< a href =＃>更多< / a>< / li> 
< li>< a href =＃>选项< / a>< / li> 
< / ul> 
< / nav> 
 
< div> 
< p> BEGIN< / p> 
< p>嗨世界< / p> 
 Hi World 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
 Hi World 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
 Hi World 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
 Hi World 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
 ... 
< p> END< / p> 
< / div> 
  

更新2：

试验你的答案和我自己的研究我已经完成了一些工作，对于我来说，我已经为导航菜单下面的内容制作了一个滚动页面，现在内容不会重叠。

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

但我必须调整我的滚动开始在顶部导航菜单的底部，并在页脚顶部结束，就像您在示例中看到的那样，当您调整浏览器大小时会出现问题。

I认为我正在寻找类似于我的容器的东西，请查看下一个链接：
$ b 在页眉和页脚之间有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 =＃>主页< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li class =divider-vertical>< / li> 
< li>< a href =＃>更多< / a>< / li> 
< li>< a href =＃>选项< / a>< / li> 
< / ul> 
< / nav> 
 
< div class =container-fluid scroll> 
< p> BEGIN< / p> 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
 ... 
< p> END< / p> 
< / div> 
 
< div class =navbar navbar-default navbar-fixed-bottom> 
< div class =navbar-header>< a class =navbar-brandhref =＃>品牌< / a>< / div> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li>< a href =＃>更多< / a>< / li> 
< li>< a href =＃>选项< / a>< / li> 
< / ul> 
< / div> 
  

CSS：

  / *这里使用的CSS将在bootstrap.css * / 
 
 body，html {
 height：100％; 
 overflow：hidden; 
 padding-top：44px; 
} 
 
 .my-own-style {
 margin-left：37px; 
 margin-top：37px; 
} 
 
 .scroll {
 overflow：auto; 
身高：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 =＃>主页< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li class =divider-vertical>< / li> 
< li>< a href =＃>更多< / a>< / li> 
< li>< a href =＃>选项< / a>< / li> 
< / ul> 
< / nav> 
 
< div class =scroll> 
< p> BEGIN< / p> 
< p>嗨世界< / p> 
 Hi World 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
 Hi World 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
< p>嗨世界< / p> 
 ... 
< p> END< / p> 
< / div> 
 
< div class =navbar navbar-default navbar-fixed-bottom> 
< div class =navbar-header>< a class =navbar-brandhref =＃>品牌< / a>< / div> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li>< a href =＃>更多< / a>< / li> 
< li>< a href =＃>选项< / a>< / li> 
< / ul> 
< / div> 
  
 CSS： 
 
 
  / *这里使用的CSS将在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; 
身高：100％; 
 padding：0; 
 margin-left：37px; 
} 
  
对我而言，这是我寻找的解决方案。
解决方案
我真的不喜欢为了推送内容而添加那些内容。这是定位旨在处理的内容。做到这一点的最好方法是首先在身体顶部添加填充，就像@davidg在他的回答中所述。此外，要将导航栏移动到位，请勿使用边距。而是使用顶部，左侧和右侧属性。 navbar-fixed-top类已经将位置设置为固定的，所以你不需要给出任何位置属性值。我还将容器流体类添加到div中（以便在内部获得一些填充）以及可滚动设置溢出属性的自定义类。 
 
 
  DEMO  
 
 
 
  CSS： 
  html，body {
 height：100％; / *将高度固定为视口的100％* / 
} 
 body {
 padding-top：87px; / * 50px为导航栏的高度+ 37px为偏移* / 
 padding-bottom：50px; / * 50px为底部导航栏的高度* / 
} 
 .navbar-offset {
 top：37px; / *从视口顶部偏移顶部导航栏37px * / 
} 
 .container-fluid.scrollable {
 height：100％; / *将可滚动区域设置为视口的100％* / 
 overflow：auto; / *允许可滚动区域根据其内容的高度有一个滚动条* / 
背景：#ccc; 
 
  
  HTML：  
 
 
 < nav class =navbar navbar-default navbar-fixed-top navbar-offset> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li class =divider-vertical>< / li> 
< li>< a href =＃>更多< / a>< / li> 
< li>< a href =＃>选项< / a>< / li> 
< / ul> 
< / nav> 
 
< div class =container-fluid scrollable> 
< p> BEGIN< / p> 
< p>嗨世界< / 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>< 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> 
  
 
My issue is that I fixed a navigation bar at the top of my webpage and it includes both side margins and top one. Below this navigation bar, I want to set an scrollable container.


Let me say I'm using Bootstrap 3.2.0 to lay out the site.

The issue is that due to the margins of my navigation bar, the content I want to put below overlap the navigation bar and it's shown besides the navigation bar. For a better explanation of this I provide you my code, and a live example:

UPDATE: I have noticed something that increases a little bit the difficult from my point of view, and it's that the body has a rule to hide the scroll and doesn't let scroll up/down:

I would like just to scroll over the content "Hi World" and obviously that the whole content is shown from the first word: "BEGIN" to "END" word scrolling.
body {
   overflow: hidden;
}
http://www.bootply.com/TZebvFEl3T (I updated the bootply code with the required restictions).
<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>


UPDATE 2:

Experimenting with your answers and my own research I achieved something it's close to work for me, I have an scroll for the div with the content below the navigation menu and now the content doesn't overlap.

The issue is that I also have a fixed footer at the page, if I resize the window the scroll is not completely visible and I can't reach the end of the list because is overlaped by the footer, so doesn't let me see the end of the scroll, if I remove the footer obviously this is visible.

But I have to adjust my scroll to start at the bottom of the top nav menu, and end at the top of my footer as you can see in the example, the issue appears when you resize the browser.

I think I'm looking for something like this for my container, please have a look to next link:

Content with 100% between header and footer

And here is my code:

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




UPDATE 3 (SOLUTION):

Ok regarding the update 2, the issue was so simple to sort it out, maybe I didn't see it.
Basically in the same way I added a padding on the top of the body to set my main container below the top navigation menu, I have to do exactly the same but with the bottom padding of the body to set my main container above the bottom navigation menu.

Moreover, I set the height to 100% for my main container in that way it expand along the whole div which contains it.

Here is the solution:

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;
}
And for me this is the solution I was looking for.
解决方案
I really don't like having to add elements that are just there for purposes of pushing content around.  This is what positioning is designed to handle.  The best way to do this is to start by adding padding to the top of your body, as @davidg stated in his answer.  Further, to move your navbar into position, don't use margins.  Instead using the top, left and right properties.  The navbar-fixed-top class already sets the position to fixed, so you don't need to give any position property value.  I also added the container-fluid class to your div (so that you get some padding inside) and a custom class scrollable to set the overflow property.

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>


                        
这篇关于将div放在导航栏下方，不要与内容重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！