创建产品着陆页时新增区块始终覆盖首部分的问题求助

问题核心原因 #

你遇到的问题由两个关键因素导致：

• .container使用了position: fixed，该属性会让元素脱离文档流，不占据页面空间，导致后续的description区块自动顶到页面顶部，被固定的.container遮挡。
• html和body设置了height: 100%，限制了页面的最小高度，当内容超出视口时无法正常滚动。

修复步骤 #

1. 调整.container定位方式：移除position: fixed，改用flex布局实现居中，让它留在文档流中，保证后续区块能自然排列在下方。
2. 修改页面高度设置：将html和body的height:100%改为min-height:100%，确保页面能根据内容自动拉伸，支持滚动。
3. 优化背景图片归属：将背景图片从body移到header，让首部分背景独立，避免影响后续区块的显示。

修改后的代码 #

CSS代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.nav-container {
  height: 70px;
  background-color: rgb(0, 221, 221);
}

.navbar {
  display: grid;
  grid-template-columns: 0.2fr auto 1fr;
  align-items: center;
  height: 80px;
  width: 90%;
  max-width: 1720px;
  margin: 0 auto;
}

#navbar-logo {
  color: white;
  justify-self: start;
  cursor: pointer;
}

.nav-menu {
  display: grid;
  grid-template-columns: repeat(5, auto);
  list-style: none;
  font-size: 1.2rem;
  text-align: center;
  width: 50%;
  justify-self: end;
}

.nav-links {
  color: white;
}

.nav-links:hover {
  color: #f9e506;
  transition: all 0.3s ease-out;
}

.nav-links-btn {
  background-color: #f9e506;
  padding: 6px 16px;
  border-radius: 4px;
}

.nav-links-btn:hover {
  background-color: transparent;
  color: white;
  padding: 5px 15px;
  border-radius: 4px;
  border: solid 1px #f9e506;
  transition: all 0.3s ease-out;
}

/* 修复container定位，改用flex居中 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px); /* 减去导航栏高度 */
  text-align: center;
}

h1 {
  color: white;
  font-size: 5rem;
  margin: 0 0 1rem;
}

h2 {
  color: white;
  font-weight: 300;
  font-size: 2.2rem;
  margin: 0 0 1rem;
}

h3 {
  color: white;
  font-weight: 300;
  font-size: 2.5rem;
  margin: 0 0 1rem;
}

html {
  width: 100%;
  min-height: 100%; /* 改为min-height */
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  min-height: 100%; /* 改为min-height */
  font-family: 'Heebo', sans-serif;
  font-size: 100%;
  line-height: 1.45;
}

/* 将背景图片移到header */
header {
  background-image: url("61766.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.btn {
  width: 300px;
  height: 80px;
  border: none;
  color: aqua;
  background-color: #04d9ff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 #f9e506;
  transition: ease-out 0.3s;
  font-size: 2rem;
  outline: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: white;
}

.btn:hover {
  box-shadow: inset 300px 0 0 0 #f9e506;
  cursor: pointer;
  color: #000;
}

.description {
  background-color: aliceblue;
  padding: 2rem; /* 添加内边距，优化显示 */
}

/* 替换Sass变量为具体数值，确保媒体查询生效 */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.5rem;
  }
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>iTravel Agency</title>
  <link rel="stylesheet" href="style.css"/>
  <script src="script.js"></script>
</head>
<body>
  <header>
    <div class="nav-container">
      <nav class="navbar">
        <h3 id="navbar-logo">iTravel</h3>
        <div class="menu-toggle" id="mobile-menu">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </div>
        <ul class="nav-menu">
          <li><a href="#" class="nav-links">Home</a></li>
          <li><a href="#" class="nav-links">Flights</a></li>
          <li><a href="#" class="nav-links">Hotels</a></li>
          <li><a href="#" class="nav-links">My Bookings</a></li>
          <li><a href="#" class="nav-links nav-links-btn">Log In</a></li>
        </ul>
      </nav>
    </div>
    <div class="container">
      <h1>iTravel</h1>
      <h2>Travelling has never been easier</h2>
      <button class="btn"><a href="#">Book Flights Now</a></button>
    </div>
  </header>
  
  <div>
    <section class="description">
      <h4>Why fly with us?</h4>
      <p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning every detail of your trip, we handle it all. Our team of experts has years of experience in the travel industry and can provide you with personalized recommendations and advice. We also offer competitive prices on flights, hotels, and vacation packages, so you can save money while enjoying a hassle-free travel experience.</p>
    </section>
  </div>
</body>
</html>

补充说明 #

• 原CSS中的$bp-s是Sass变量，若未使用预处理器，需替换为具体像素值（如768px），否则媒体查询无法生效。
• 给description添加内边距，避免文字紧贴边缘，提升阅读体验。

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