基于Flex实现Header、Content、Footer自适应布局的技术求助

嘿，你已经选对了最简洁的解决方案！用Flexbox来实现这个需求简直完美，我来帮你补全代码并解释关键细节：

完整代码实现 #

首先是语义化的HTML结构：

<div class="wrapper">
  <header>Header 内容</header>
  <main class="content">这里是自适应高度的内容区域——内容少时Footer贴视口底部，内容多时Footer会被推到页面最底部</main>
  <footer>Footer 内容</footer>
</div>

然后是修正并完善后的CSS样式：

/* 重置浏览器默认样式，避免边距/内边距干扰布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 用min-height比height更灵活，内容超出时自动撑开容器 */
  background-color: pink;
}

header, footer {
  border: 1px solid #000; /* 修正你之前的拼写错误：soli → solid */
  display: flex;
  align-items: center; /* 核心：实现垂直居中 */
  justify-content: center; /* 可选：实现水平居中，不需要可以删掉 */
  padding: 1rem; /* 给内容加内边距，避免贴边太局促 */
}

.content {
  flex: 1; /* 关键中的关键！让内容区域占据header和footer之外的所有剩余空间 */
  border: 1px solid #000;
  padding: 1rem;
}

关键细节拆解 #

• min-height: 100vh：代替你原来的height:100vh，这样当内容超出视口高度时，整个容器会自动向下撑开，不会出现内容被截断的问题
• flex:1 给.content：这个属性是flex-grow:1的简写，告诉Flex容器让内容区域吃掉所有剩余空间，直接实现了「内容少则Footer贴底，内容多则Footer被推到底」的效果
• Header/Footer的垂直居中：通过给header和footer本身设置display:flex + align-items:center实现，比用line-height或者position的方法更灵活，适配不同高度的头部/底部内容
• box-sizing:border-box：让边框和内边距不会额外撑大元素的尺寸，布局计算更准确，避免出现意料之外的溢出

额外小贴士 #

如果你的页面body有默认margin，上面的*选择器重置已经帮你处理掉了，不然会出现不必要的滚动条或者布局偏移～

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