当我调整页面高度时，为什么我的 hero 和 about 部分之间有一个空格？答案

【问题标题】：Why is there a space between my hero and about section when I resize the height of the page?当我调整页面高度时，为什么我的 hero 和 about 部分之间有一个空格？
【发布时间】：2022-01-22 11:20:44
【问题描述】：

我在制作响应式 css 方面还很陌生，但我还没有做太多。如果你全屏打开下面的代码并改变标签的高度，高度越小，我的英雄和关于部分之间的差距就越大。我希望所有设备上的间隙保持相同的大小。希望能帮到你，谢谢。

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  background-color: rgb(255, 255, 255);
  overflow-x: hidden;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#header {
  border-radius: 15px;
  margin-top: -0.8%;
  background-image: url(./images/DJI_0410-Enhanced.jpg);
  background-size: cover;
  background-position: right;
  width: 98.5%;
  height: 94%;
}

#title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8%;
}

h1 {
  color: #f7f4f7;
  margin-top: 10%;
  font-size: 4.5vw;
  font-weight: 700;
  margin-bottom: 0;
}

#subTitle {
  color: white;
}

h2 {
  font-size: 3.6vw;
  font-weight: 600;
  margin-top: 10%;
}

button {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  width: 7.5rem;
  height: 3rem;
  border-radius: 10px;
  cursor: pointer;
}

.bookNow {
  background-color: #f8f8f8;
  color: #2B3758;
  margin-right: 0.4rem;
  transition: 200ms linear;
  border: none;
}

.bookNow:hover {
  background-color: #e6e3e6;
  color: #2B3758;
}

.learnMore {
  background-color: #2B3758;
  color: #f7f4f7;
  margin-left: 0.4rem;
  transition: 200ms linear;
  border: none;
}

.learnMore:hover {
  background-color: #4e6090;
  color: #f7f4f7;
}

#navBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2% 8% 0% 8%;
}

.logo {
  width: 18%;
  height: 18%;
}

li a {
  text-decoration: none;
}

.page {
  color: white;
}

.otherPages {
  color: #585858;
  transition: 200ms linear;
}

.otherPages:hover {
  color: white;
}

.bookNow {
  margin-right: 8%;
  overflow: hidden;
}

.nav__links {
  list-style: none;
}

.nav__links li {
  display: inline-block;
  padding: 0px 20px;
  font-weight: 400;
}

.bookNowNav {
  background-color: rgba(255, 255, 255, .3);
  overflow: hidden;
  border-radius: 15px;
  border: 2.5px solid white;
  padding: 0px;
  transition: 200ms linear;
  color: white;
  margin-left: 25px;
}

.bookNowNav:hover {
  background-color: rgba(230, 230, 230, 0.5);
}

#about {
  position: absolute;
  margin-top: 860px;
  left: 50%;
  transform: translateX(-50%);
  width: 82.5%;
}

#aboutImage {
  display: inline-block;
  background-image: url(./images/DJI_0216.jpg);
  background-size: cover;
  background-position: center;
  width: 47.8%;
  height: 475px;
  border-radius: 15px;
  margin-right: 2%;
}

#aboutInfo {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 47.8%;
  margin-left: 2%;
  padding-top: 10px;
  margin-top: -38px;
}

h2 {
  position: justify;
  margin-bottom: 30px;
}

.info {
  color: rgb(140, 140, 140);
  line-height: 30px;
  text-align: justify;
  height: 240px;
  font-weight: 300;
}

<!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">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <title>Above Photography</title>

</head>

<body>

  <div id="header" class="center">

    <div id="navBar">

      <img class="logo" src="./images/AbovePhotographyLogo.png" alt="Logo">

      <nav>

        <ul class=n av__links>

          <li><a class="page" href="#">Home</a></li>
          <li><a class="otherPages" href="#">Photography</a></li>
          <li><a class="otherPages" href="#">Videography</a></li>
          <li><a class="otherPages" href="#">Contact</a></li>
          <a href="#"><button class = "bookNowNav">Book Now</button></a>

        </ul>

      </nav>



    </div>

    <div id="title">

      <h1>Above <br>Photography</h1>
      <h2 id="subTitle">Taking The<br>Perfect Picture</h2>
      <button class="bookNow">Book Now</button>
      <button class="learnMore">Learn More</button>

    </div>

  </div>

  <div id="about">

    <div id="aboutImage"></div>

    <div id="aboutInfo">

      <h2 class="">
        About
      </h2>

      <p class="info">
        My name is Max Herczeg and I'm a Grade 8 student from Toronto, Ontario. I have been flying drones for over 4 years and I've taken several photography courses as well. My passion for both of these interests has led me to create Above Photography. My age
        allows me to provide clients with an affordable cost for a high-end final product. Above Photography has a creative and fun approach to each project. My company uses the high-end DJI Air 2S Drone. It shoots 5.4K video resolution and 20 mega pixel
        pictures. This means that both photos and videos will look outstanding.
      </p>

      <button class="seeWork">Learn More</button>

    </div>

  </div>

【问题讨论】：

因为您的“关于”部分有一个很大的固定margin-top。
我可以使用什么替代品？
我不确定。可以说，这段代码中有许多不寻常的 CSS 选择会阻止它被轻松调整。

标签： html css responsive-design responsive

【解决方案1】：

就像 Ouroborus 在 cmets 中提到的，这里没有简短的答案，有几个原因：

您将标头 (.center) 和 #about div 设置为 position: absolute。

绝对定位会从正常的文档流中移除元素，并且有几个副作用。

您的标题的高度设置为百分比值，并且它没有具有设置高度的相对定位的父容器。所以它的高度来自<body>，同时也是你的viewport的高度。换句话说，如果您的视口改变了高度，那么您的#header 也会改变。
您将固定的margin-top: 860px 设置为#about 部分，但您的#header 尺寸不是固定的，如第2 点所述。

因此，将所有这些放在一起这意味着每当您将视口设置为比860px 短时，about 部分的边距保持在 860 像素，但您的标题会随着视口缩小。这就是为什么高度越短，两者之间的差距就越大。这就是它的工作原理。

注意：如果你让你的窗口更高，因为标题是正文的 94% 高度，它实际上会与 about 部分重叠。 *例如，您可以通过将background-color 设置为#header 并让您的窗口高1600 像素来清楚地看到这一点。此外，当您这样做时，原样您的 #title 将在文档中垂直居中...任何其他内容）。

我的建议是：

远离绝对位置，除非对于复杂内部布局绝对必要。您不需要 header 容器或 about 是绝对的。
在尝试进行响应式布局之前，请确保您了解 CSS box-model、display 和 position 的工作原理。以及 flexbox 和/或网格布局（甚至浮动，如果您想学习类似在过去）。

https://www.w3schools.com/css/ 是一个很好的起点。编码愉快。

【讨论】：