无需固定元素用Flex/W3.css实现全高侧边栏小屏移至主内容下方

问题根因 #

• 你为.aside设置了height: 100%，覆盖了flex容器默认的align-items: stretch等高特性，侧边栏高度仅由自身内容决定，无法和高度更高的主内容对齐，sticky定位自然无法覆盖主内容的完整滚动区间
• 外层flex容器未设置最小视口高度，内容较少时布局无法撑满全屏
• 移动端未重置侧边栏的sticky定位，可能出现侧边栏遮挡内容的问题

修复后的CSS代码 #

HTML代码无需修改，仅替换原有CSS即可生效：

/* 新增全局默认样式重置 */
body {
  margin: 0;
  min-height: 100vh;
}
body * {
  box-sizing: border-box; /* 避免边框撑大元素尺寸 */
  border: 1px solid black;
}

.flex-container {
  display: -ms-flexbox;
  /* IE10*/
  display: flex;
  -ms-flex-wrap: wrap;
  /*IE10*/
  flex-wrap: wrap;
  padding: 0 15px;
  /* 新增：最小高度撑满视口 */
  min-height: 100vh;
  align-content: flex-start;
}

.header {
  -ms-flex: 100%;
  /*IE10*/
  flex: 100%;
  height: 70px;
  position: sticky;
  top: 0;
  z-index: 10; /* 提高层级避免被遮挡 */
  background-color: rgba(255, 255, 255, 1.00);
}

.aside {
  -ms-flex: 20;
  /*IE10*/
  flex: 20;
  /* 删除错误的height:100% */
  position: sticky;
  top: 70px;
  padding: 0 40px 0 0;
  /* 新增：侧边栏内容过多时可独立滚动 */
  overflow-y: auto;
}

.main {
  -ms-flex: 80;
  /*IE10*/
  flex: 80;
}

.footer {
  -ms-flex: 100%;
  /*IE10*/
  flex: 100%;
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 0 0 5px 0;
  background-color: rgba(255, 255, 255, 1.00);
}

.post {
  display: -ms-flexbox;
  /* IE10*/
  display: flex;
  -ms-flex-wrap: wrap;
  /*IE10*/
  flex-wrap: wrap;
  height: 500px;
  gap: 40px;
}

.post__story {
  -ms-flex: 3;
  /*IE10*/
  flex: 3;
}

.post__slider {
  -ms-flex: 7;
  /*IE10*/
  flex: 7;
}

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
  .post {
    flex-direction: column;
  }
  .header {
    order: 1;
  }
  .main {
    order: 2;
  }
  .aside {
    order: 3;
    /* 新增：移动端重置定位和内边距，避免遮挡内容 */
    position: static;
    padding: 15px 0;
  }
  .footer {
    order: 4;
  }
  .navTop,
  .navBottom {
    width: 100%;
  }
}

Bootstrap简化实现方案 #

Bootstrap 5及以上版本自带栅格、flex、sticky定位工具类，无需编写大量自定义CSS即可实现需求：

• 外层用.container-fluid做包裹，设置min-vh-100类撑满视口
• 头部添加.sticky-top类，自定义高度即可
• 主体部分用.row包裹，侧边栏添加.col-lg-3 .sticky-top类，自定义top:70px偏移量，主内容添加.col-lg-9类
• 页脚添加.sticky-bottom类
• 响应式布局直接通过Bootstrap内置的断点类实现，小于lg尺寸时侧边栏自动占满整行，用.order-*类调整移动端展示顺序即可

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