如何让页面标题置于header底部？（避免使用padding-top）

方案1：通过Body Margin-Top避开固定Header空间 #

如果你的Header使用position: fixed（脱离文档流导致内容重叠），直接给<body>设置与Header高度一致的外边距，让页面整体内容下移，同时用flex布局把标题推到.heading容器底部：

/* 根据你的Header实际高度调整数值 */
body {
  margin-top: 80px;
}

.heading {
  height: 100vh; /* 或你需要的容器高度 */
  display: flex;
  align-items: flex-end;
  /* 保留你的其他容器样式 */
}

方案2：使用Scroll Padding Top适配滚动场景 #

如果页面需要滚动，这个方法更灵活，无需硬写高度值：

html {
  scroll-padding-top: 80px; /* 等于Header高度 */
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  /* 你的Header样式 */
}

.heading {
  height: 100vh;
  display: flex;
  align-items: flex-end;
}

方案3：给.heading容器设置相对定位 #

如果Header是静态/相对定位（占据文档流空间），给.heading容器设置相对定位并下移，同时调整容器高度避免超出视口：

.heading {
  position: relative;
  top: 80px; /* 等于Header高度 */
  height: calc(100vh - 80px);
  display: flex;
  align-items: flex-end;
}

优化技巧：用CSS变量统一管理高度 #

为了避免重复写高度值，可通过CSS变量统一维护，方便后续修改：

:root {
  --header-height: 80px;
}

header {
  height: var(--header-height);
}

body {
  margin-top: var(--header-height);
}

.heading {
  height: calc(100vh - var(--header-height));
  display: flex;
  align-items: flex-end;
}

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