使用display:flex解决固定导航栏遮挡内容的替代方案

针对你提到的fixed顶部导航栏遮挡下方内容的问题，用Flex布局替代硬编码margin-top的方案更灵活，还能结合align-items:center实现内容垂直居中，具体实现步骤如下：

核心思路 #

将页面根容器（#main）设置为垂直方向的Flex容器，通过给根容器添加与导航栏高度匹配的内边距预留导航栏空间，同时让内容容器自动填充剩余视口高度，无需硬写固定的margin-top数值。

修改后的完整代码 #

HTML（修正原代码标签错误：<l>改为<li>） #

<div id="main">
  <div id="navbar">
    <ul style="display:inline-block;">
      <li style="display:inline-block; margin:10px;">Home</li>
      <li style="display:inline-block;margin:10px;">About</li>
      <li style="display:inline-block;margin:10px;">Contact</li>
    </ul>
  </div> <!-- end navbar-->
        
  <div class="container">
    <div class="row" style="width:500px; margin:auto;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa lectus, semper et diam et, finibus mattis orci. Aliquam volutpat dui ac quam sagittis, sed volutpat velit sollicitudin. Nullam at consectetur erat. Proin quis est pretium, volutpat tellus sit amet, lacinia ex. Nam vel massa sed dolor tincidunt imperdiet non quis lorem. Ut efficitur luctus vestibulum. Phasellus nec blandit turpis. Sed viverra quam vitae gravida tincidunt. Praesent interdum iaculis dolor, ac cursus quam semper sit amet. Ut sapien magna, vulputate at erat quis, congue fermentum tortor. Etiam neque ex, pellentesque at venenatis ac, sollicitudin ut quam. 
      </p>
    </div>
  </div>
</div> <!-- end main -->

CSS #

/* 重置全局样式，消除默认边距内边距影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
}

#main {
  width: 100%;
  /* 设置为垂直方向Flex容器 */
  display: flex;
  flex-direction: column;
  /* 占满整个视口高度 */
  min-height: 100vh;
  /* 预留导航栏空间，数值与导航栏高度一致 */
  padding-top: 60px;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 60px;
  background-color: grey;
  width: 100%;
}

.container {
  /* 自动填充根容器的剩余空间 */
  flex: 1;
  /* 实现内容垂直居中 */
  display: flex;
  align-items: center;
  /* 可选：实现内容水平居中 */
  justify-content: center;
  background-color: yellow;
  width: 100%;
}

关键说明 #

1. Flex容器布局：#main设置display:flex; flex-direction:column; min-height:100vh;，让页面整体按垂直方向排列，且占满整个视口高度。
2. 预留导航栏空间：给#main添加padding-top:60px;，数值与导航栏height一致，替代原有的margin-top，彻底避免内容被fixed导航栏遮挡。
3. 内容填充与居中：.container设置flex:1;，会自动填充#main除预留空间外的全部剩余高度，再通过display:flex; align-items:center;实现内容垂直居中，同时可选添加justify-content:center;实现水平居中。
4. 可维护优化：可以用CSS变量统一管理导航栏高度，比如:root { --navbar-height: 60px; }，然后导航栏的height和#main的padding-top都用var(--navbar-height)，后续修改导航栏高度只需调整一处即可。

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