在React中使用Bootstrap 4如何让container占满100%高度？

这个问题的核心原因是百分比高度的生效依赖于父元素有明确的高度值，在React环境中，你可能忽略了挂载组件的根元素（通常是#root）以及html、body的高度设置——这和纯HTML环境不同，React组件是嵌套在根容器里的，若根容器没有高度，子元素的height: 100%就会失效。

具体解决方案 #

1. 给根层级元素设置100%高度 #

在全局CSS中添加以下样式，确保html、body和React挂载的根容器都拥有100%的高度：

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

这一步是关键，因为你的.container的父元素（最终是#root）必须有明确的高度，才能让height: 100%生效。

2. 调整组件与现有CSS #

保持你原有的组件代码不变，同时确保.container的高度设置正确：

<div className="container h-100">
  <div className="row">
    <div className="col-md-6">导航栏内容</div>
    <div className="col-md-6">其他内容</div>
  </div>
</div>
<div className="filler" />

你的现有.container CSS可以保留，加上上面的根层级样式后，它就能正确占满100%高度了：

.container {
  background-color: green;
  width: 80%;
  height: 100%;
}

.filler {
  background-color: orange;
  height: 2400px;
}

额外说明 #

• 你之前尝试的h-100类其实是Bootstrap提供的height: 100%工具类，但它同样依赖父元素的高度，所以必须先确保根元素高度设置正确。
• 如果你的.container还嵌套在其他自定义组件中，那这个父组件也需要设置height: 100%，才能让高度属性层级传递下去。

为什么纯HTML环境中可以生效？大概率是你在纯HTML里无意中给body设置了高度，或者直接把容器放在body下，而React中多了一层#root容器，这层的高度默认是auto，导致百分比高度无法继承。

内容的提问来源于stack exchange，提问作者atjin