最小高度不擴大-有解無憂

所以，我正在制作一個網路作品集作為我的專案，我設法找到了一個問題。當我在“關于我”部分使用 min-height 時，該部分似乎沒有根據內容調整其高度。可能是因為我在導航欄中使用了浮動，但我不太確定。如果有人可以幫助我，我將不勝感激。提前致謝。

這是我的 HTML 和 CSS 代碼：

/* global */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
}


/* animations */

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes popup {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/* Navbar */

header {
  width: 100%;
  height: 64px;
  text-align: center;
  background-color: #1a374d;
  display: flex;
  justify-content: space-between;
  padding: 0 80px;
  font-weight: bold;
  position: fixed;
  z-index: 1;
}

header li {
  list-style: none;
  font-weight: bold;
}

header a {
  color: #b1d0e0;
}

header .brandLong {
  width: auto;
  height: 64px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b1d0e0;
}

header .brandShort {
  width: auto;
  height: 64px;
  float: left;
  display: none;
  align-items: center;
  justify-content: center;
  color: #b1d0e0;
}

header .menu {
  width: 50%;
  min-width: 350px;
  height: 100%;
  float: right;
}

header .menu ul {
  width: 100%;
  height: inherit;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

header .menu li {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .menu ul a {
  width: 25%;
  height: inherit;
  display: inline-block;
  transition: 0.3s;
  font-weight: 400;
}

header .menu ul a:hover {
  background-color: #b1d0e0;
  color: #1a374d;
  transition: 0.3s;
  font-weight: 400;
}

header #menuToggle {
  display: none;
}

header .menu-icon {
  display: none;
}


/* Home Section */

.home {
  min-height: 100vh;
}

.home .container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

.home .container img {
  height: 100%;
  animation: popup 0.8s ease-in-out;
}

.home .container .text {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
  justify-content: center;
  animation: appear 1.6s;
}

.home .container .text h1 {
  font-size: 72px;
  font-weight: bold;
  line-height: auto;
}

.home .container .text h1 span {
  color: #1a374d;
}

.home .container .text p {
  font-size: 24px;
  margin-top: 20px;
  letter-spacing: 2px;
  line-height: 35px;
}

.home .container .arrow {
  font-size: 24px;
  animation: bounce 2s ease-in-out infinite, appear 1.6s;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 77%;
  margin: 0 0 0 35%;
  width: 50%;
  font-weight: bold;
}

.home .container .arrow a {
  color: #1a374d;
}

.home .container .arrow a i {
  font-size: 48px;
  margin-top: 5px;
}


/* About */

.about {
  min-height: 100vh;
  background-color: #406882;
  color: white;
  padding: 0 80px;
}

.about .container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}

.about .container h1 {
  font-size: 64px;
  text-align: center;
  margin: 150px 0 100px 0;
}

.about .container h2 {
  font-size: 40px;
}

.about .container h3 {
  font-weight: 400;
  margin-bottom: 50px;
  font-size: 24px;
}

.about .container .aboutContainer {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about .container .aboutContainer .desc1 {
  width: 25%;
  text-align: justify;
  padding: 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-evenly;
}

.about .container .aboutContainer .desc1 .top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about .container .aboutContainer .desc1 .top p {
  line-height: 28px;
  margin-top: 12px;
  font-size: 20px;
  font-weight: normal;
}

.about .container .aboutContainer .desc1 .bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about .container .aboutContainer .desc2 {
  width: 30%;
  background-image: url(asset/me2.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 700px;
  border-radius: 40px;
  margin: 20px;
}

.about .container .aboutContainer .desc2 img {
  height: 100%;
}

.about .container .aboutContainer .desc3 {
  width: 25%;
  padding-left: 50px;
}

.about .container .aboutContainer .desc3 h2 {
  margin-bottom: 12px;
}

.about .container .aboutContainer .desc3 ul li {
  font-size: 20px;
  margin-bottom: 8px;
  margin-left: 20px;
}


/* social media */

.socialMedia {
  display: flex;
  margin-top: 12px;
  justify-content: space-evenly;
  width: 80%;
}

.socialMedia .instagram {
  background-color: white;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dd2a7b;
  border-radius: 50%;
  transition: 0.5s;
  font-size: 24px;
}

.socialMedia .email {
  background-color: white;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ea4335;
  border-radius: 50%;
  transition: 0.5s;
  font-size: 24px;
}

.socialMedia .email:hover {
  background-color: #ea4335;
  color: white;
  transition: 0.5s;
}

.socialMedia .instagram:hover {
  background-color: #dd2a7b;
  color: white;
  transition: 0.5s;
}

.socialMedia .linkedin {
  background-color: white;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0077b5;
  border-radius: 50%;
  transition: 0.5s;
  font-size: 24px;
}

.socialMedia .linkedin:hover {
  background-color: #0077b5;
  color: white;
  transition: 0.5s;
}

.socialMedia .spotify {
  background-color: white;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1ed761;
  border-radius: 50%;
  transition: 0.5s;
  font-size: 24px;
}

.socialMedia .spotify:hover {
  background-color: #1ed761;
  color: white;
  transition: 0.5s;
}

.socialMedia .github {
  background-color: white;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #171515;
  border-radius: 50%;
  transition: 0.5s;
  font-size: 24px;
}

.socialMedia .github:hover {
  background-color: #171515;
  color: white;
  transition: 0.5s;
}


/* Education background */

.about .container .edu {
  margin: 50px 0 100px 0;
}

.about .container .edu h2 {
  margin-bottom: 24px;
}

.about .container .edu table {
  font-size: 24px;
  border-collapse: collapse;
}

.about .container .edu table td {
  padding: 15px;
  padding-right: 100px;
}

.about .container .edu table thead {
  background-color: #6998ab;
  font-weight: 600;
}

.about .container .edu table tbody {
  background-color: #b1d0e0;
}

.about .container .edu table tbody tr:nth-child(2) {
  background-color: #a0c4d6;
}


/* Media Query */

@media screen and (max-width: 1200px) {
  .home .container img {
    display: none;
  }
  .home .container .text {
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 100%;
    justify-content: center;
    animation: appear 1.6s;
  }
  .home .container .arrow {
    width: 100%;
    margin: 0;
  }
}

@media screen and (max-width: 768px) {
  /* NavBar */
  header {
    display: block;
    padding: 0;
  }
  .brandLong {
    display: none;
  }
  .brandShort {
    display: flex;
    margin-left: 80px;
  }
  .menu {
    width: 100%;
    height: auto;
  }
  .menu ul {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
  }
  .menu ul a {
    text-align: left;
    width: 100%;
    height: 50px;
    background-color: #1a374d;
  }
  .menu-icon {
    width: 200px;
    height: inherit;
    display: block;
    position: absolute;
    top: 18px;
    right: 0;
    color: #b1d0e0;
  }
  #menuToggle:checked~ul {
    max-height: 350px;
  }
  .menu-icon i {
    font-size: 1.7em;
  }
  .home .container .text h1 {
    font-size: 48px;
  }
}

@media screen and (max-width: 480px) {
  .brandShort {
    display: flex;
    margin-left: 40px;
  }
  .menu-icon {
    width: 100px;
  }
  .home .container .text h1 {
    font-size: 36px;
  }
  .home .container .arrow a {
    display: none;
  }
}

<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  <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=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="landingPage.css">
  <title>Christopher's Portfolio</title>
</head>

<body>
  <!-- Nav Bar -->
  <header>
    <a href="#homeSection">
      <figure class="brandLong">Christopher Nathanael Tessy</figure>
    </a>
    <a href="#homeSection">
      <figure class="brandShort">Christopher N. T.</figure>
    </a>
    <nav class="menu">
      <input type="checkbox" id="menuToggle">
      <label for="menuToggle" class="menu-icon"><i class="fa fa-bars"></i></label>
      <ul>
        <a href="#homeSection">
          <li>Home</li>
        </a>
        <a href="#aboutSection">
          <li>About Me</li>
        </a>
        <a href="#">
          <li>Portfolio</li>
        </a>
        <a href="#">
          <li>Contact</li>
        </a>
      </ul>
    </nav>
  </header>

  <!-- Home Section -->
  <section class="home" id="homeSection">
    <div class="container">
      <img src="asset/me1.png" alt="Christopher NT">
      <div class="text">
        <h1>
          Hey there! I'm <span>Christopher Nathanael Tessy</span>
        </h1>
        <p>Welcome to my personal web portfolio where I will showcase my best of the best works</p>
      </div>
      <div class="arrow">
        <a href="#aboutSection">About me</a>
        <a href="#aboutSection"><i class="fas fa-angle-double-down"></i></a>
      </div>
    </div>
  </section>

  <!-- About Me Section -->
  <section class="about" id="aboutSection">
    <div class="container">
      <h1>About Me</h1>
      <h2>Christopher Nathanael Tessy</h2>
      <h3>Front-End Web Developer</h3>
      <div class="aboutContainer">
        <div class="desc1">
          <div class="top">
            <h2>Who am I?</h2>
            <p>My name is Christopher Nathanael Tessy. I am a dedicated and hardworking computer science student with a strong passion in front-end web development equipped with strong designing abilities with proven successes in designing posters, banners,
              backdrops, social media, and merchandise for multiple years. Committed to working as a collaborative and positive team member. Bilingual, communicative, and ready to join my next team.
            </p>
          </div>
          <div class="bottom">
            <h2>Social Media</h2>
            <div class="socialMedia">
              <a href="mailto:[email protected]">
                <div class="email">
                  <span class="far fa-envelope"></span>
                </div>
              </a>
              <a href="https://www.instagram.com/christophertessy_/">
                <div class="instagram">
                  <span class="fab fa-instagram"></span>
                </div>
              </a>
              <a href="https://www.linkedin.com/in/christopher-nathanael-tessy-b30339220/">
                <div class="linkedin">
                  <span class="fab fa-linkedin-in"></span>
                </div>
              </a>
              <a href="https://open.spotify.com/user/21z7frm7cr3jctz2c6zv6nafa?si=bd8ea929cc274a96">
                <div class="spotify">
                  <span class="fab fa-spotify"></span>
                </div>
              </a>
              <a href="https://github.com/TessyJr">
                <div class=" github">
                  <span class="fab fa-github"></span>
                </div>
              </a>
            </div>
          </div>
        </div>
        <div class="desc2">

        </div>
        <div class="desc3">
          <h2>Software and Programming Languages</h2>
          <p>
            <ul>
              <li>Photoshop</li>
              <li>Visual Studio Code</li>
              <li>Figma</li>
              <li>HTML</li>
              <li>CSS</li>
              <li>JavaScript</li>
              <li>C  </li>
            </ul>
          </p>

        </div>
      </div>
      <div class="edu">
        <h2>Education Background</h2>
        <table>
          <thead>
            <tr>
              <td>Year</td>
              <td>Level of Education</td>
              <td>Description</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2009-2015</td>
              <td>Primary School</td>
              <td>Sekolah Bina Gita Gemilang</td>
            </tr>
            <tr>
              <td>2015-2021</td>
              <td>High School</td>
              <td>Penabur Secondary Kelapa Gading</td>
            </tr>
            <tr>
              <td>2021-2025</td>
              <td>University</td>
              <td>Bina Nusantara University</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>
</body>

</html>

這是我面臨的問題：背景顏色不覆寫底部區域

uj5u.com熱心網友回復：

洗掉高度屬性

 .about .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
}

uj5u.com熱心網友回復：

min-height: 100vh 到 body 元素應該可以解決問題。這里，100vh 表示初始 body 高度將占視口高度的 100%，最好使用：

height : 100vh;

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411884.html

標籤：

上一篇：在影像精靈上放置一個鏈接

下一篇：如何使用htmlcss將垂直文本移動到左下角？