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

Posted 2023-03-05

【中文标题】在 React 中使用时，Bootstrap 4 容器没有占据全高

【英文标题】：Bootstrap 4 container not taking full height when used in React

【发布时间】：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 标签。

我也有同样的问题

【参考方案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"/>
    </>
)