在 React 中使用时，Bootstrap 4 容器没有占据全高答案

【问题标题】：Bootstrap 4 container not taking full height when used in React在 React 中使用时，Bootstrap 4 容器没有占据全高
【发布时间】：2018-10-23 11:37:54
【问题描述】：

我正在尝试在 React 中使用 Bootstrap 4。如何让容器占据 100% 的高度？

我的 React 组件中的 HTML：

<div className="container h-100"> 
    <div className="row">
        <div className="col-md-6" />
        <div className="col-md-6" />                               
    </div>
</div>

<div className="filler" />

CSS：

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

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

我希望容器（绿色部分）占据 100% 的高度。目前，它包裹着内容（导航栏，它是作为单独的 React 组件创建的）。

Image

我已经能够让容器和 div 在普通的 Bootstrap html / css 中占据 100% 的高度。但是当我将相同的代码插入到我的 React 组件中时，高度最终不起作用。我可以将宽度设置为 80%，将高度设置为 px 或 vw，但我似乎无法将高度设置为百分比。我也尝试过使用 flex-container，但没有解决问题。

不胜感激！

【问题讨论】：

你也试过body标签的100%高度吗？
我有，虽然我目前没有在任何地方使用 body 标签。
我也有同样的问题

标签： html css reactjs bootstrap-4

【解决方案1】：

将容器高度：100% 更改为最小高度：继承帮助吗？

return (
    <>
        <div style={{minHeight: "60px"}} className="bg-info">

            <div className="container" style={{backgroundColor: "green", width: "80%", minHeight: "inherit"}}> 
                <div className="row">
                    <div className="col-md-6">Home</div>
                    <div className="col-md-6">About...</div>                              
                </div>
            </div>

        </div>

        <div style={{backgroundColor: "orange", height: "2400px"}}/>
    </>
)

【讨论】：