还原页面时 Html/CSS 网页内容混合

Question

我使用 html、CSS 和 bootstrap 创建了这个网页，在大屏幕和中屏幕上一切正常，但是当我恢复到小屏幕(col-12 和 col-sm-12)时，功能和服务部分混合，我尝试了所有我不知道如何修复它的方法。

这是一些代码，我希望你们清楚:

    * {
      padding: 0;
      margin: 0;
      font-family: "Lucida Fax", sans-serif;
    }

    body {
      overflow-x: hidden;
    }

    .header .content-box {
      background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/Webz.jpeg);
      background-position: center;
      background-size: cover;
      width: 100%;
      height: 100vh;
    }

    .menu {
      display: inline-flex;
    }

    .menu button {
      width: 75px;
      height: 35px;
    }

    .menu img {
      width: 147px;
      height: 147px;
      cursor: pointer;
      margin-top: 1px;
    }

    .menu button {
      background: #ff4d73;
      font-size: 16px;
      color: #fff;
      border: 0;
      position: absolute;
      right: 70px;
      top: 40px;
      cursor: pointer;
    }

    .menu button .fa {
      margin-right: 7px;
    }

    .banner-text {
      color: whitesmoke;
      margin: 14%;
      text-align: center;
    }

    .banner-text h2 {
      font-size: 37px;
    }

    .banner-text p {
      font-size: 15px;
      margin: 25px;
    }

    .banner-text a {
      border: 1px solid #ff4d73;
      padding: 7px;
      color: white;
      text-decoration: none;
      display: block;
      width: 100px;
      margin: auto;
      background: #ff4d73;
      transition: .70s;
    }

    .banner-text a:hover {
      background: transparent;
    }

    .service .content-box {
      background: whitesmoke;
      width: 100%;
      height: 100vh;
    }

    h1 {
      text-align: center;
      padding-top: 100px;
    }

    .service h1::after {
      content: '';
      background: #ff4d73;
      display: block;
      height: 3px;
      width: 190px;
      margin: 21px auto 50px;
    }

    .services .icon {
      font-size: 37px;
      margin: 21px auto;
      height: 55px;
      width: 55px;
      border: 1px solid #ff4d73;
      border-radius: 50%;
      color: #ff4d73;
    }

    .services p {
      font-size: 12px;
      margin-top: 10px;
      color: #777;
      padding: 20px;
    }

    .services span {
      color: #ff4d73;
    }

    h3 {
      font-size: medium;
    }

    .services .col-md-3:hover {
      background: #ff4d73;
      cursor: pointer;
      color: #fff;
      box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.4);
      transition: 0.5s;
    }

    .services .col-md-3:hover p {
      color: #fff;
    }

    .services .col-md-3:hover span {
      color: #fff;
    }

    .services .col-md-3:hover .icon {
      border: 1px solid #fff;
      color: #fff;
    }

    li {
      padding-left: 35px;
    }

    .features .content-box {
      background: white;
      width: 100%;
      height: 100vh;
    }

    .features h2 {
      margin: 49px;
      padding-top: 111px;
    }

    .features h2::after {
      content: '';
      background: #ff4d73;
      display: block;
      height: 3px;
      width: 150px;
      margin: 13px 7px 51px;
    }

    .features ul {
      margin-left: 5px;
      margin-top: 33px;
      list-style-type: none;
    }

    .features ul li {
      position: relative;
      line-height: 33px;
      font-size: 13px;
    }

    .features ul li::before {
      content: '';
      height: 7px;
      width: 7px;
      background: #ff4d73;
      transform: rotate(45deg);
      margin-right: 19px;
      display: inline-block;
    }

    img {
      height: 57%;
      width: 85%;
      margin-top: 29%;
    }

    .footer .content-box {
      background: whitesmoke;
      width: 100%;
      height: 100vh;
    }

    .footer h1::after {
      content: '';
      background: #ff4d73;
      display: block;
      height: 3px;
      width: 190px;
      margin: 21px auto 50px;
    }

    .form-control {
      margin: 17px;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
    }

     ::placeholder {
      font-size: 12px;
    }

    .contact-form button {
      border: none !important;
      background: #ff4d73 !important;
      box-shadow: none !important;
      border-radius: 0;
      margin-left: 27px;
    }

    .contact-info .follow {
      background-color: #fff;
      padding: 8px;
      margin: 11px;
    }

    .contact-info .fa {
      margin: 10px;
      padding-right: 20px;
      font-size: 20px;
      font-weight: bold;
      color: #ff4d73 !important;
    }

    .copyright {
      text-align: center;
      font-size: 15px;
    }

    .fa-heart-o {
      color: red;
      font-size: 17px;
    }

    .footer hr {
      margin-top: 217px;
      background: #ff4d73;
    }

    .form-group label {
      display: block;
    }

    .features {
      position: relative;
      top: 100%;
    }

    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <title>Document</title>
    </head>

    <body>


      <!-- Service Section -->

      <section class="service d-block">
        <div class="content-box">
          <div class="container">
            <h1>Our Services</h1>
            <div class="row services d-block">
              <div class="col-md-3 col-sm-12 col-12 text-center">
                <div class="icon">
                  <i class="fa fa-renren"></i>
                </div>
                <h3>Brand <span>Activation</span></h3>
                <p>
                  Subscribe to our Youtube channel to watch more videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
                </p>
              </div>

              <div class="col-md-3 col-12 text-center">
                <div class="icon">
                  <i class="fa fa-user"></i>
                </div>
                <h3>Employee <span>Activity</span></h3>
                <p>
                  Subscribe to our Youtube channel to watch more videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
                </p>
              </div>

              <div class="col-md-3 col-12 text-center">
                <div class="icon">
                  <i class="fa fa-meetup"></i>
                </div>
                <h3>Event <span>Organizer</span></h3>
                <p>
                  Subscribe to our Youtube channel to watch nmore videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
                </p>
              </div>

              <div class="col-md-3 col-12 text-center">
                <div class="icon">
                  <i class="fa fa-video-camera"></i>
                </div>
                <h3>Video <span>Production</span></h3>
                <p>
                  Subscribe to our Youtube channel to watch nmore videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
                </p>
              </div>

            </div>


          </div>
        </div>

      </section>

      <!-- Features Section -->

      <section class="features d-block">
        <div class="content-box">
          <div class="container">
            <div class="row">
              <div class="col-md-6 col-sm-12 col-12">
                <h2>Features Are</h2>

                <ul>
                  <li>Some Text Some Text Some Text Some Text.</li>
                  <li>Some Text Some Text Some Text Some Text. </li>
                  <li>Some Text Some Text Some Text Some Text Some Text.</li>
                  <li>Some Text Some Text Some Text Some Text Some Text.</li>
                  <li>Some Text Some Text Some Text Some Text.</li>
                </ul>
              </div>

              <div class="col-md-6 col-sm-12  col-12">
                <img src="img/Webz2.jpeg" alt="Picture">
              </div>

            </div>
          </div>
        </div>
      </section>
    </body>

    </html>

Answer 1

您的内容大于 100vh，但您将容器限制为该大小。这就是重叠的原因。

.content-box {
  height: 100vh;
}