html - 使用 CSS 使 Div 元素成为浏览器窗口的 100% 高度

Question

我正在使用 bootstrap 3 设计一个 HTML 页面，现在我遇到了一个问题。我希望我的 div 标记容器占据浏览器窗口的 100% 高度，但仅使用 CSS(无 javascript)。

我在堆栈溢出本身中遇到了很多问题，但找不到可以帮助我的解决方案。我不想使用 vh，因为当您调整窗口大小时它无法正常工作或无法正确显示容器，我有 5 个 div 标签容器并且想要每个容器与浏览器窗口大小相同。

p.s 我不认为 html 或 css 是必需的，因为它可以在没有代码的情况下回答。

Answer 1

是this你想要什么？

html, body {
  height: 100%;
  margin: 0;
}
#thediv{
  min-height:100%;
  min-width:100%;
  background-color:red;
  display:flex;
  align-items:stretch;
  position:relative;
}
.interiordiv{
  background-color:blue;
  width:50px;
  margin:15px auto 15px auto;
}

<div id="thediv">
	<div class="interiordiv">A</div>
	<div class="interiordiv">V</div>
	<div class="interiordiv">C</div>
	<div class="interiordiv">D</div>
	<div class="interiordiv">E</div>
</div>

如果不是，请尝试使其更清楚，如果您不想发布代码也可以，但可以发布模型图像或其他内容。