html - 调整窗口大小时阻止 DIV 向上移动

Question

我正在设计一个简单的响应式网站，我有一个“特殊”的 DIV，它是唯一一个占据 100% 主体宽度的 DIV。当我上下调整浏览器大小时，该 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%。 那个负边距会导致你的问题，编辑那个值以获得一个好的位置