试图让 DIV 占据 100% 的视口（div 逃离父级 div）

Question

我有几个嵌套的 DIV。我希望我的第二个 Div 占据 100% 的视口，而不管屏幕的大小。我在 div 中有两张图片和两个按钮。每当屏幕变为 "to big or to small" 时，按钮就会被推到父 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% 的视口。

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

Answer 1

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

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

试图让 DIV 占据 100% 的视口（div 逃离父级 div）

Trying to get DIV to take 100% of viewport (div escapes parent div)

html

css

responsive-design