如何使div在navbar下方对齐？解决navbar遮挡首个div的问题

嘿，这事儿我碰到过好多次！问题出在你给navbar加了fixed-top类——固定定位的元素会脱离正常文档流，页面里的其他元素不会把它的位置算进去，所以第一个div就直接跑到navbar下面被挡住了。给你几个简单靠谱的解决办法：

方法1：给父容器加顶部内边距（最直接） #

你的navbar高度已经设为63px了，直接给包裹所有内容的#app容器加上同等高度的padding-top，就能把所有div往下推，刚好避开navbar：

<body>
  <div id="app" class="flex-container" style="padding-top: 63px;"> <!-- 新增padding-top -->
    <nav class="navbar default-layout p-0 fixed-top d-flex flex-row" style="height: 63px;">
      <select id="region" onchange="initProcess();" style="position:absolute;background:#eaeaea;"> </select>
      <div style="width: calc(100% - 74px); padding-left: 74px; left: 0; text-align: center; color: #fff">
        <img src="images/co-logo.png" style="width: 100px; margin-top: -6px">
        <h4>Dashboards</h4>
      </div>
      <div class="navbar-menu-wrapper d-flex align-items-right">
        <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-right" type="button" data-toggle="offcanvas">
          <span class="mdi mdi-menu"></span>
        </button>
      </div>
    </nav>
    <div class="flex-item" style="background-color:red"></div>
    <div class="flex-item" style="background-color:blue"></div>
    <div class="flex-item" style="background-color:yellow"></div>
    <div class="flex-item" style="background-color:grey"></div>
  </div>
</body>

方法2：用外边距替代内边距 #

如果你不想给父容器加内边距，换成margin-top也能达到同样效果，直接给#app加：

#app {
  margin-top: 63px;
}

或者直接在HTML里写行内样式也行。

额外提示：响应式场景的处理 #

如果你的navbar在移动端会改变高度（比如折叠后高度变化），固定的63px可能就不合适了。这时候可以用JavaScript动态计算navbar的实际高度，再给父容器设置对应的padding：

const navbar = document.querySelector('.navbar');
const appContainer = document.getElementById('app');
appContainer.style.paddingTop = `${navbar.offsetHeight}px`;

不过看你的代码里navbar高度是固定的，前面两个方法完全够用啦。

修改完之后，你的四个div就都会乖乖待在navbar下方，不会被遮挡了！

内容的提问来源于stack exchange，提问作者Flávio Costa