Html 将 div 放在导航栏下方，不要重叠内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26402156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put div below navigation bar and don't overlap content
提问by Joe Lewis
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.
让我说我正在使用 Bootstrap 3.2.0 来布置站点。
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.
我只想滚动内容“Hi World”，显然整个内容是从第一个单词：“BEGIN”到“END”单词滚动显示的。
body {
overflow: hidden;
}
http://www.bootply.com/TZebvFEl3T(I updated the bootply code with the required restictions).
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>
UPDATE 2:
更新 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.
尝试使用您的答案和我自己的研究，我取得了一些对我来说很接近的东西，我有一个 div 滚动条，内容位于导航菜单下方，现在内容不重叠。
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
http://www.bootply.com/knJkGoEHWQ
HTML:
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：
/* 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):
更新 3（解决方案）：
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.
好的，关于更新2，问题很简单，我没看到。基本上以相同的方式，我在正文顶部添加了一个填充以将我的主容器设置在顶部导航菜单下方，我必须完全相同，但使用正文的底部填充将我的主容器设置在底部导航上方菜单。
Moreover, I set the height to 100% for my main container in that way it expand along the whole div which contains it.
此外，我将主容器的高度设置为 100%，这样它就会沿着包含它的整个 div 扩展。
Here is the solution:
这是解决方案：
http://www.bootply.com/sazMMHNCGy
http://www.bootply.com/sazMMHNCGy
HTML:
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：
/* 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.
对我来说，这就是我正在寻找的解决方案。
采纳答案by jme11
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.
我真的不喜欢为了推送内容而添加元素。这就是定位的目的。正如@davidg 在他的回答中所说，最好的方法是首先在身体顶部添加填充物。此外，要将导航栏移动到位，请不要使用边距。而是使用 top、left 和 right 属性。navbar-fixed-top 类已经将位置设置为固定，因此您无需提供任何位置属性值。我还将容器流体类添加到您的 div（以便您在内部获得一些填充）和一个可滚动的自定义类以设置溢出属性。
DEMO
演示
CSS:
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:
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>
回答by DavidG
From the Bootstrap documentation:
来自Bootstrap 文档：
Body padding requiredThe fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
需要正文填充固定的导航栏将覆盖您的其他内容，除非您将填充添加到 <body> 的顶部。尝试您自己的价值观或使用我们下面的代码片段。提示：默认情况下，导航栏高 50 像素。
So just add your body padding:
所以只需添加你的身体填充：
body
{
padding-top: 70px;
}
If you don't want your body to scroll behind the navbar, change your CSS to use padding instead of margin:
如果您不希望您的身体滚动到导航栏后面，请更改您的 CSS 以使用填充而不是边距：
.my-own-style {
padding-left: 37px;
padding-top: 37px;
}
回答by Miquel
You should displace the scrolling div with a fixed div before it:
您应该在滚动 div 之前用固定的 div 替换它：
http://www.bootply.com/3UpMI5yTIA
http://www.bootply.com/3UpMI5yTIA
.scroll-pre {
height: 100px;
width: 100%;
background-color: inherit;
position: fixed;
}
And html:
和 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>
EDIT
编辑
http://www.bootply.com/CKD9nrQxG5
http://www.bootply.com/CKD9nrQxG5
If you want to scroll on the div (not on the page) then add the class "scroll" to your scrolling div and update css with:
如果您想在 div 上滚动（而不是在页面上），则将“scroll”类添加到您的滚动 div 并使用以下内容更新 css：
body, html {
overflow: hidden;
height: 100%;
}
.scroll {
margin-top: 100px; // Same as .scroll-pre height
overflow: auto;
height: 100%;
}
EDIT 2 (footer)
编辑 2（页脚）
http://www.bootply.com/JwmaWgvWPI
http://www.bootply.com/JwmaWgvWPI
If you want a footer, the strategy is the same, place a fixed div in bottom:0. Again it will only work if you place a background to the pre-scroll and footer divs.
如果你想要一个页脚，策略是一样的，在bottom:0. 同样，它只有在您为预滚动和页脚 div 放置背景时才有效。
I've adjusted the paddigns of the scroll to let the last item be visible.
我已经调整了滚动条的边距，让最后一个项目可见。
.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%;
}
回答by Aru
回答by Nimesh Nayaju
You can try the following codes:
您可以尝试以下代码：
HTML Code:
HTML代码：
<nav class="navbar navbar-default">
.......
</nav>
CSS Code:
CSS 代码：
.navbar{
border-radius: 0;
}
