防止内容在固定导航栏下方滚动答案

【问题标题】：Prevent content to scroll beneath a fixed navbar防止内容在固定导航栏下方滚动
【发布时间】：2018-01-17 09:38:53
【问题描述】：

这个页面http://alsotoday.com/roemerstrasse/ 有一个固定的引导导航栏，它应该保持固定，所以背景中的视频可以通过它发光。当内容一直向上滚动时，它会在导航栏下方，这是不利的。任何人都知道，如何为内容创建一个上边距，所以它只会在导航栏下方滚动而不将导航栏更改为不固定？

编辑 1： main-area-video 和 panel_container（同时称为 main-area）的高度都是 100%，因为每个视频和图块都应该填满一个屏幕。

【问题讨论】：

标签： css scroll navbar

【解决方案1】：

这样的？在这个sn-p中，文章不会走在导航栏后面，只有内容是可滚动的。例如，这就是 SPA 的工作方式。

编辑我为导航栏添加了不透明度，以便您可以看到，它后面没有任何内容。

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.navbar {
  position: fixed;
  top: 0;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  font-family: Helvetica;
  font-size: 30px;
  background: darkcyan;
  width: 100%;
  padding: 0 20px;
  color: white;
  opacity: 0.2;
}

.content {
  margin-top: 50px;
  background: #ddd;
  height: calc(100vh - 50px);
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
}

.article {
  height: 200px;
  width: 100%;
  background: #ccc;
  margin: 12px 0;
}

<div class="navbar">Navbar</div>
<div class="content">
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
</div>

【讨论】：

【解决方案2】：

由于您的页面始终处于 100% 高度，并且唯一滚动的内容是您可以将其设为 absolute 而不是 fixed。

但既然您要求使用 fixed 位置的解决方案，只需将 margin 添加到内容包装器中。

所以要明确一点：将 margin-top: {MENU_HEIGHT}px 添加到内容 div，将 {MENU_HEIGHT} 替换为菜单的实际高度或与它的所需距离。

【讨论】：

当您在 Inspector 中编辑代码时，这对您有用吗？当我在 main-area-video 或 panel_container 中输入 margin-top 时，它在这里不起作用。
是的，我猜您通过添加顶部边距将高度设置为 100% 以上，因此您将获得 2 个滚动条，而不仅仅是内容中的一个。
试试下面的，添加一个margin-top：100px；到您的 .panel_container 并将高度设置为： height: calc(100% - 150px);
是的，谢谢，height: calc(100% -150px) 有效（也感谢@trichetriche，他的回答也包括这个）。
@Boratznan 对我的代码的回答更小，更容易实现。