如何用CSS实现网页垂直响应式？Hero区域适配剩余视口高度

问题根源 #

你当前的布局问题主要来自两点：

• 浏览器默认的margin/padding未重置，干扰了视口高度的精准计算
• 使用calc(100vh - 4.5rem)依赖固定导航栏高度，且min-height属性在内容未填满时易保留多余空间，同时移动端浏览器地址栏动态变化会导致vh值不稳定

解决方案：用Flexbox实现自适应剩余空间 #

Flexbox是实现"占据剩余视口空间"更可靠的方案，它能自动计算容器剩余高度，避免vh的兼容性问题，配合全局样式重置可消除默认边距干扰。

修改后的CSS代码

/* 重置全局默认样式，消除浏览器自带边距的干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  background-color: burlywood;
}

body {
  min-height: 100vh;
  min-width: 320px;
  /* 全局1rem内边距，box-sizing确保不额外增加视口尺寸 */
  padding: 1rem;
  /* 将body设为垂直方向的flex容器 */
  display: flex;
  flex-direction: column;
}

/* 导航栏样式（按你的实际需求调整，这里为示例） */
.navbar {
  height: 4.5rem;
  background-color: #fff;
  margin-bottom: 1rem;
}

.header {
  background-color: aqua;
  /* flex:1 让Hero区域自动填充导航栏下方的剩余空间 */
  flex: 1;
  /* 内部用flex布局控制图片和文本的高度分配 */
  display: flex;
  flex-direction: column;
}

.hero-image {
  width: 100%;
  /* 图片自适应容器高度，保持比例不拉伸 */
  flex: 1;
  object-fit: cover;
}

.hero-about-container {
  padding: 1rem 0;
}

.hero-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.summary {
  font-family: "Inter", sans-serif;
  margin-bottom: 1.5rem;
}

.read-more {
  background-color: hsl(5, 85%, 63%);
  padding: 0.2rem 1rem;
  font-size: 1rem;
  color: white;
  border: none;
  cursor: pointer;
}

修改后的HTML代码（补充导航栏示例）

<!-- 导航栏 -->
<nav class="navbar">
  <!-- 你的导航菜单内容 -->
</nav>

<section id="hero">
  <header class="header" id="header">
    <picture>
      <source media="(min-width: 765px)" srcset="./assets/images/image-web-3-desktop.jpg">
      <img class="hero-image" src="./assets/images/image-web-3-mobile.jpg" alt="hero-image">
    </picture>
    <div class="hero-about-container">
      <h1 class="hero-title">The Bright <br> Future of Web <br> 3.0?</h1>
      <div class="hero-details">
        <p class="summary">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people. But is it really fulfilling its promise?</p>
        <button type="button" class="read-more">Read More</button>
      </div>
    </div>
  </header>
</section>

关键修改说明 #

1. 全局样式重置：通过*选择器清除默认margin/padding，设置box-sizing: border-box确保内边距不改变元素实际尺寸。
2. Flex容器布局：将body设为垂直flex容器，导航栏固定高度，Hero区域用flex:1自动填充剩余视口空间，替代手动calc计算。
3. 图片适配优化：给hero-image添加object-fit: cover，保证图片按比例填充容器，避免拉伸变形。
4. 内部结构调整：header设为flex容器，合理分配图片和文本区域的高度，彻底解决底部空白问题。

修改后，Hero区域会在所有设备上精准占据导航栏下方的剩余视口空间，同时兼容后续新增的页面内容。

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