Question

我正在设计一个简单的响应式网站，并且我有一个“特殊” DIV，它是唯一具有100％宽度的宽度的网站。当我上下调整浏览器的大小时，该DIV正在向上移动并覆盖上面的DIV。仅当我添加响应式CSS时才会发生这种情况。

这始终是它的外观。

这是我向上调整窗口大小时发生的情况。

我的代码：

  header {
  width: 80%;
  margin: 0 auto;
  height: calc(100vh - 60px);
}


/* Header content */

.header-content {
  text-align: center;
  margin-top: 8%;
  padding: 5%;
  padding-top: 0;
}

.header-content img {
  width: 64%;
  height: auto;
}

.header-content h6 {
  font-size: 1.6em;
  font-weight: 300;
  margin-top: 3%;
  line-height: 1.5em;
}

.stores {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 6%;
}

.badges {
  display: inline-block;
}

.badges img {
  width: 40%;
  height: auto;
}


/* Header Device */

.header-device {
  text-align: center;
  margin-top: 4%;
}

.header-device img {
  width: 50%;
  height: auto;
}


/* :::: Image Call:::: */

.image-call {
  width: 100vw;
  height: 450px;
  position: relative;
  background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/people.jpg);
  background-size: cover;
  z-index: 100;
}

.image-call h5 {
  text-align: center;
  font-size: 3em;
  font-weight: 200;
  color: #fff;
  margin-top: 10%;
}


/* MY RESPONSIVE CODE */

@media (max-width: 991.98px) {
  body {
    background-color: #ececec;
  }
  /* Header */
  header {
    height: calc(100vh - 60px);
  }
  /* Image Call */
  .image-call {
    margin-top: -10%;
    height: 356px;
  }
  .image-call h5 {
    margin-top: 12%;
  }

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- /Bootstrap 4 -->

<!-- HEADER -->
<header>
  <div class="row">
    <div class="header-content col-lg col-sm-12">
      <img src="img/logo-simplecash.svg" alt="Logo SimpleCash">
      <h6>text here</h6>
      <div class="col-12">
        <div class="row">
          <div class="stores">
            <div class="badges col-lg-12 col-sm-12">
              <a href="#"><img src="img/google-play-badge.svg" alt="Google Store"></a>
              <!--a href="#"><img src="img/app-store-badge.svg" alt="App Store"></a-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-device col-lg col-sm-12">
      <img src="img/screen-home.png" alt="App Simple Cash">
    </div>
  </div>
</header>
<!-- / HEADER -->

<!-- IMAGE CALL -->
<div class="row">
  <div class="image-call col-12">
    <h5>text here text here <br /> text here text here
    </h5>
  </div>
</div>
<!-- / IMAGE CALL -->

Answer 1

使用百分比高度代替px可以工作

编辑：

我没有在媒体查询中看到margin-top: -10%。该负边距会引起您的问题，请修改该值以取得良好的排名

Answer 2

查看我的代码后，我发现了导致此问题的原因。基本上，我更改了响应式CSS的这一部分：

header {
    height: auto;
}

在我最初的CSS中，设置是这样的（这样它将占用窗口高度的100％）：

header {
    height: calc(100vh - 60px);
}

调整窗口大小时停止DIV向上移动

2 个答案: