时间戳

首页 > 解决方案 > 如何将容器的高度设置为 100% 并显示导航栏？

javascript - 如何将容器的高度设置为 100% 并显示导航栏？

问题描述

尝试做出反应以正确呈现我的页面的时间很糟糕

我有这个

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <Router />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root'),
)

在我的 index.html 我有

html, body, #root, #root>div {
  height: 100%;
  overflow: hidden;
}

里面的路由器我有

            <>
                <GlobalStyle />
                <Nav/>
                <div>
                    <Router>
                        <Route component={Home} path="/" />
                    </Router>
                </div>
            </>

我想在顶部显示我的导航，然后在下面显示组件以占用其余的屏幕空间，但不会溢出并呈现滚动。但无论我尝试做什么，我似乎都无法同时显示

我尝试向导航栏添加固定高度。height: 100px !important这适用于导航栏，但其余内容大约占页面的 60%，并且调用了一个烦人的 div。<div tabindex="-1" style="outline: none">它没有出现在我的代码中的任何地方。我认为可访问性的东西？但是当我将其设置为 100% 并将其下方的容器 div 设置为 100% 时，它似乎可以工作。但是我不能在我的代码中将它设置为 100% 所以我很困惑

我还假设我在 html 中设置的代码会级联，所以我很困惑为什么它没有级联到这个 div？我想知道设置导航栏是否会导致这种情况？

无论如何，我想要的只是一个占据整个屏幕的页面。但也会渲染一个 100px 左右的导航栏

有任何想法吗？

标签： javascripthtmlcssreactjs

解决方案

你可以使用弹性。

您可以分别使用以下css：

对于父组件 =>

display: flex, flex-direction: column;

对于导航组件 =>

height: 100px

对于兄弟组件 =>

flex-grow: 1

推荐阅读