导航栏折叠与位置元素冲突答案

【问题标题】：navbar-collapse conflict with position elements导航栏折叠与位置元素冲突
【发布时间】：2018-01-17 03:10:08
【问题描述】：

我的网站有问题，这是一个商店定位器页面。但是，如果您在 PC 中调整窗口大小，就好像您在移动分辨率中一样，当您切换导航栏折叠时，导航栏将位于侧边栏下方，看起来非常难看。我的 CSS 有问题吗？

body {
      color:#404040;
      font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
      margin:0;
      padding:0;
      -webkit-font-smoothing:antialiased;
    }

    * {
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
    }
    .sidebar {
      position:absolute;
      width:33.3333%;
      height:100%;
      top:90px;left:0;
      overflow:hidden;
      border-right:1px solid rgba(0,0,0,0.25);
    }

    .map {
      position:absolute;
      left:33.3333%;
      width:66.6666%;
      top:90px;bottom:0;
    }

更新（2017 年 8 月 10 日）： ff 解决了问题：

好的，用 position:relative 和高度：100vh； – thehuijb

【问题讨论】：

标签： jquery mobile toggle navbar collapse

【解决方案1】：

添加

.dark-header .menu-header, .header-dark .menu-header {
    position:relative;
}

【讨论】：

谢谢先生！你是救生员！但是，它与屏幕重叠，一点也不差。但是如果折叠不与屏幕重叠会更好，它将侧边栏和地图向下推。
好的，将 siebar 和 map 包装在一个新的 div 中，位置：relative 和 height:100vh;
并设置顶部：0；在侧边栏和地图上
老兄，我做了你说的一切，它神奇地解决了我的整个问题。我不知道“高度：100vh”有什么作用，但没关系，您是 stackoverflow 中的向导之一。非常非常非常感谢！ 5 天后问题解决！
请添加一点解释，说明上面的代码为什么以及如何解决手头的问题