CSS position:sticky导航被内容覆盖及100vh多余滚动条问题

问题表现 #

给header元素设置position: sticky; top:0;实现吸顶效果时，滚动页面过程中内容层会显示在header前方，海蓝色内容块遮挡住蓝色导航栏，不符合预期。
问题复现代码：

<header style="position: sticky;top: 0;">
    <div data-offset-top="200">
         <div class="navbar navbar-default yamm" role="navigation" id="navbar" style="top:0; padding:0 20px;background-color: #003777">
            <!-- 导航内容 -->
        </div>
      </div>
 </header>

<div id="content" class="clearfix" style="height:100vh; overflow:auto;">
    <div style="height: 100%; background-image: url('https://abcde.png');background-size: cover;background-repeat: no-repeat;">
        <div class="row">
            <div class="col-md-12">
                <div class="outer" style="margin: 0 auto;width: 30%; background-color: #ECFAFF; font-family:fabio; overflow:hidden;">
                    <div style="padding:30px 30px 15px">
                        <!-- 内容区 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

问题效果示意图：

解决方案 #

直接给设置了position: sticky的<header>根元素添加层级属性即可，参考样式：

header {
    z-index: 999;
}

注意事项：

• z-index属性仅对定位元素（position值为relative/absolute/fixed/sticky）生效
• 不要把z-index设置在header的内部子元素上，否则无法提升整个吸顶导航的层级，会出现设置无效的问题

问题表现 #

给内容容器设置height:100vh样式，预期容器高度和屏幕视口高度相等，仅当内部内容高度超出容器范围时才出现滚动条，但实际内容没有超出的情况下，页面仍然出现Y轴滚动条。
问题效果示意图：

原因与修复方案 #

这个问题是默认样式和单位计算偏差共同导致的，按优先级排查修复即可：

• 浏览器默认边距撑高页面：所有浏览器默认会给<body>标签添加8px左右的外边距，加上header本身的高度，页面总高度会超出视口高度触发滚动条。直接全局重置默认样式即可解决：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

• 行内元素隐式间隙撑高容器：如果容器内存在图片、行内块元素，默认的vertical-align: baseline对齐规则会在元素下方留出几像素的基线对齐间隙，额外撑高容器。给对应元素设置display: block或者vertical-align: middle即可消除间隙。
• 视口单位计算偏差：在移动端浏览器中，100vh的计算默认会包含浏览器顶部/底部工具栏的高度，导致实际渲染高度超出可视区域。这种场景可以用动态视口单位100dvh替代100vh，或者手动计算内容区高度：height: calc(100vh - 导航栏高度)。

内容的提问来源于stack exchange，提问作者lauwis premium