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

Posted 2023-03-24

【中文标题】导航栏折叠与位置元素冲突

【英文标题】：navbar-collapse conflict with position elements

【发布时间】：2018-01-17 03:10:08

【问题描述】：

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

DEMO

Screenshot

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

【参考方案1】：

添加

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

【讨论】：

谢谢先生！你是救生员！但是，它与屏幕重叠，一点也不差。但是如果折叠不与屏幕重叠会更好，它将侧边栏和地图向下推。

好的，将 siebar 和 map 包装在一个新的 div 中，位置：relative 和 height:100vh;

并设置顶部：0；在侧边栏和地图上

老兄，我做了你说的一切，它神奇地解决了我的整个问题。我不知道“高度：100vh”有什么作用，但没关系，您是 *** 中的向导之一。非常非常非常感谢！ 5 天后问题解决！

请添加一点解释，说明上面的代码为什么以及如何解决手头的问题