Question

我试图使图像扩展到页面的全部可用宽度和高度，在一开始我实现了这一点，但是我错了，因为当我向页面添加一些内容时，它的高度当然会增加不会扩展到填满所有可用高度，所以我最终得到了一个丑陋的空白。

屏幕截图：

以下是可执行代码段：https://codepen.io/Amoocris/full/vPWOpX

html

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

<head>
  <meta charset="utf-8">
  <title>Murva Plan</title>
  <link rel="stylesheet" href="style2.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>




  <div class="backIMg">






       <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>
     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>     <div class="from">
        FROM :
        <input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
      </div>





        <div class="plansBackground">
          <div class="Plans-container" data-aos="fade-up">
            <div class="background-extand">

          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>
                        <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>          <h1 class="day">
              input
            </h1>
          </div>



            </div>
          </div>

    </div>









  <script src="script2.js" charset="utf-8"></script>
</body>

</html>

css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Roboto;
  font-weight: bold;
}

.backIMg {
background-color: rgb(155,230,170);
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  background-image: url('https://images.unsplash.com/photo-1559967861-360333071389?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80')
}


  .plansBackground {
    background-color: rgba(255, 255, 255, .5);
  overflow-y: auto;

width: 100vw;
height: 0;
position: relative;
bottom: 0;
left: 0;
    transition: 1s;
    color: black;
  }

  .height {
      height: 25vw;
  }

javascript

setTimeout(

  function() {
    document.querySelector(".plansBackground").classList.add("height");
  }, 1000

);

并提前谢谢

Answer 1

您可以尝试将position: fixed添加到.backIMG

将图像扩展到最大可用宽度和高度

1 个答案: