html - 试图让 DIV 占据 100% 的视口(viewport)(div 转义父 div)

Question

我有几个嵌套的 DIV。无论屏幕大小如何，我都希望我的第二个 Div 占据视口(viewport)的 100%。我在这个 div 中有两个图像和两个按钮。每当屏幕“变大或变小”时，按钮就会被推到父 div 之外。

我试过将“topContainerBtns”移动到“topPage”div 中，但这似乎与样式有点困惑。

html,
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.topContainer {
  height: 100vh;
}

#crunchyFace {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: 20%;
}

#topPage {
  margin: 2%;
  padding-top: 5em;
  padding-bottom: 10em;
}

.parallax {
  background-image: url('../assets/img/CrunchSoft/backgroundColor.png');
  height: 25%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div>
  <div class="topContainer row">
    <div id="topPage" class="col-sm-11 col-xl-11 col-lg-11">
      <img id="crunchyFace" src="https://dummyimage.com/3035x371/000/fff" alt="Crunchy" class="img-responsive" />
      <img src="https://dummyimage.com/100x100/000/fff" class="img-fluid img-responsive" />
    </div>
    <div id="topContainerBtns" class="text-center col-md-12 col-lg-12 col-xl-12">
      <button type="button" class="btn btn-primary">Cost Calculator</button>
      <button type="button" class="btn btn-primary">Request a Requsition</button>
    </div>
  </div>
  <div class="parallax"></div>
</div>

在我更大的显示器上，图片看起来很棒。然后我将它拖到我的小型笔记本电脑显示器上，按钮最终位于父 DIV 之外。无论屏幕尺寸如何，我都需要“topContainer”占据 100% 的视口(viewport)。

编辑:我不认为代码片段完美地解释了问题所在，但是按钮离底部图片的距离接近我的意思。

Answer 1

未设置宽度，那么您希望容器如何在整个视口(viewport)中缩放。

设置.topContainer宽度为width:100%;