为什么类在其包含的元素方面超出空间？答案

【问题标题】：Why does class exceed space in regards to the elements that it contains?为什么类在其包含的元素方面超出空间？
【发布时间】：2022-01-26 16:46:57
【问题描述】：

:root {
  --clr-primary: #0F052F;
  --clr-secondary: #43D9B8;
  --clr-light: #EEEEEE;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
}

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

body {
  font-family: 'Poppins', sans-serif;
}

.wrapper {
  width: 1440px;
  margin: 0 auto;
  padding: 0 100px;
}


/* Header - Navigation */

.desktop-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1240px;
  height: 100px;
  position: fixed;
  z-index: 200;
  /* top: 44px; */
  padding-right: 0;
  background: white;
}

.desktop-nav .menu-items {
  display: flex;
  list-style: none;
}

.desktop-nav .menu-items li {
  margin: 0 27.5px;
}

.desktop-nav .menu-items li:nth-last-of-type(1) {
  margin-right: 0;
}

.desktop-nav .menu-items li a {
  text-decoration: none;
  color: var(--clr-primary);
  font-size: 16px;
  font-weight: var(--fw-medium);
  position: relative;
}

.desktop-nav .menu-items li a.active::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: var(--clr-secondary);
  left: 0;
  bottom: -2px;
}

.desktop-nav .menu-items li a.btn {
  color: white;
  background-color: var(--clr-primary);
  border-radius: 10px;
  padding: 10px 23px;
}


/* BIA section */

.bia-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bia-container .left h1 {
  font-size: 80px;
  font-weight: var(--fw-bold);
  margin: 84px 627px 18px 105px;
  color: white;
  line-height: 96px;
}

.bia-container .left p {
  font-size: 18px;
  font-weight: var(--fw-light);
  margin: 0px 632px 57px 105px;
  color: white;
}

.bia-container .left a.btn {
  text-decoration: none;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  padding: 10px 23px;
  border: 1px solid #43D9B8;
  margin: 0 0px 84px 105px;
  color: white;
}

.bia-container .right {
  padding-right: 105px;
}


/* Background header */

.bia-container .background {
  position: absolute;
  background: linear-gradient(135deg, #43D9B8 0%, #172443 64.58%, #0F052F 84.9%);
  border-radius: 50px 50px 300px 50px;
  width: 1240px;
  height: 585px;
  top: 112px;
}

.bia-container .background .right {
  position: absolute;
  top: 132px;
  right: 105px;
  left: 803px;
}


/* Animation */

.desktop-nav {
  animation: fadeDown 1000ms forwards;
  opacity: 0;
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bia-container .background .right {
  animation: fadeToLeft 800ms forwards cubic-bezier(0.22, 0.32, 0, 1.54);
  opacity: 0;
  animation-delay: 800ms;
}

@keyframes fadeToLeft {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Google Fonts-->
  <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@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="wrapper">
    <nav class="desktop-nav">
      <div class="logo">
        <a href="#">
          <img src="Images/bia-logo.svg" alt="">
      </div>

      <ul class="menu-items">
        <li>
          <a href="#" class="active">Home</a>
        </li>

        <li>
          <a href="#">Services</a>
        </li>

        <li>
          <a href="#">Contact</a>
        </li>

        <li>
          <a href="#" class="btn">Neem contact op</a>
        </li>
      </ul>
    </nav>

    <!-- End of desktop navigation -->

    <header class="bia-container">
      <div class="background">
        <div class="left">
          <h1>Make data work for you</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient purus. Libero pharetra tortor.</p>
          <a href="#" class="btn">Neem contact op</a>
        </div>

        <div class="right">
          <img src="Images/header-analytics.svg" alt="">
        </div>
      </div>
    </header>

    <!-- End of header section -->


  </div>

  <script src="main.js"></script>
</body>

</html>

有谁知道为什么类 'bia-container' 比标题块大吗？类中的元素不包含标题块之外的任何内容。

我在尝试在标题块下方添加内容时遇到的问题是两个“块”之间的间距太大。

在下图中，您可以看到“bia-container”类大于标题块。

【问题讨论】：

我不太明白你的问题，但你看到height: 100vh了吗？它基本上是 100%（视口高度，而不是剩余空间）高度。因此，如果您的屏幕高度为 500 像素，则为 500 像素。

标签： html css

【解决方案1】：

这是因为您在 bia-container 上使用了 width: 100vh;。改成width: 100%;，下面添加内容应该不会有大空格的问题。

:root {
  --clr-primary: #0F052F;
  --clr-secondary: #43D9B8;
  --clr-light: #EEEEEE;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
}

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

body {
  font-family: 'Poppins', sans-serif;
  margin: 0 auto;
}

.wrapper {
  width: 100vw;
  margin: 0 auto;
  height: 100%;
  position: relative;
}


/* Header - Navigation */

.desktop-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100px;
    position: fixed;
    z-index: 1;
    /* top: 44px; */
    padding-right: 0;
    background: white;
}

.desktop-nav .menu-items {
  display: flex;
  list-style: none;
}

.desktop-nav .menu-items li {
  margin: 0 27.5px;
}

.desktop-nav .menu-items li:nth-last-of-type(1) {
  margin-right: 0;
}

.desktop-nav .menu-items li a {
  text-decoration: none;
  color: var(--clr-primary);
  font-size: 16px;
  font-weight: var(--fw-medium);
  position: relative;
}

.desktop-nav .menu-items li a.active::after {
  content: "";
  position: relative;
  height: 3px;
  width: 100%;
  background-color: var(--clr-secondary);
  left: 0;
  bottom: -2px;
}

.desktop-nav .menu-items li a.btn {
  color: white;
  background-color: var(--clr-primary);
  border-radius: 10px;
  padding: 10px 23px;
}


/* BIA section */

.bia-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bia-container .left h1 {
  font-size: 80px;
  font-weight: var(--fw-bold);
  padding: 100px;
  color: white;
  line-height: 96px;
}

.bia-container .left p {
  font-size: 18px;
  font-weight: var(--fw-light);
  margin: 0px 632px 57px 105px;
  color: white;
}

.bia-container .left a.btn {
  text-decoration: none;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  padding: 10px 23px;
  border: 1px solid #43D9B8;
  margin: 0 0px 84px 105px;
  color: white;
}

.bia-container  .right {
  padding-right: 105px;
}


/* Background header */

.background {
  position: absolute;
  background: linear-gradient(135deg, #43D9B8 0%, #172443 64.58%, #0F052F 84.9%);
  border-radius: 50px 50px 300px 50px;
  width: 1240px;
  height: 585px;
  top: 112px;
}

.background .right {
  position: absolute;
  top: 132px;
  right: 105px;
  left: 803px;
}


/* Animation */

.desktop-nav {
  animation: fadeDown 1000ms forwards;
  opacity: 0;
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bia-container .background .right {
  animation: fadeToLeft 800ms forwards cubic-bezier(0.22, 0.32, 0, 1.54);
  opacity: 0;
  animation-delay: 800ms;
}

@keyframes fadeToLeft {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.container {
  position: relative;
  margin: 0 auto;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <!-- Google Fonts-->
      <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@300;400;500;700&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css" />
      <script src="main.js"></script>
   </head>
   <body>
            <div class="desktop-nav">
            <nav>
              <div class="logo">
                <a href="#">
                    <img src="Images/bia-logo.svg" alt="">
                </a>
              </div>
                <ul class="menu-items">
                    <li>
                        <a href="#" class="active">Home</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                    <li>
                        <a href="#" class="btn">Neem contact op</a>
                    </li>
                </ul>
              </nav>
            </div>
         <!-- End of desktop navigation -->
         <div class="wrapper">
            <div class="bia-container">
                <div class="background">
                    <div class="left">
                        <h1>Make data work for you</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut neque faucibus gravida viverra tristique. Morbi quis commodo interdum id risus. Vitae hac viverra dui quis lobortis parturient purus. Libero pharetra tortor.</p>
                        <a href="#" class="btn">Neem contact op</a>
                    </div>
                    <div class="right">
                        <img src="Images/header-analytics.svg" alt="">
                    </div>
                </div>
            </div>
     </div>
     <div class="container">
     <div class="test">
        <p> content under neath original content </p>
     </div>
     </div>
     
   </body>
</html>

【讨论】：

当我尝试这样做时，我得到以下信息：imgur.com/a/2jrH4Zf。 “Bia-container”的高度为 0px。你知道为什么会这样吗？
@SLAC 请查看我添加的内容。我建议尽可能远离position: absolute;。您的默认定位方式应该是 flex 或 grid 而不是绝对的。我希望这会有所帮助。