css - Bootstrap 4 - 容器填满整个屏幕，滚动后显示页脚

Question

我有一个 React 应用程序，我在其中使用 MDBootstrap，它基本上是 Bootstrap4 作为我的 css 框架。我有一个带有登录表单的简单页面。无论屏幕尺寸如何，我都希望页面填满整个屏幕 + 我希望底部的页脚仅在用户向下滚动整个屏幕后显示。如何实现？如何使容器填满整个可用屏幕+滚动前一个容器后显示的下一个容器。我想实现这样的目标

我的代码

render() {
        return (
            <MDBContainer id={'main'} fluid>'
                <Router history={history}>
                    <MDBRow>
                        <MDBCol>
                            <Header/>
                        </MDBCol>
                    </MDBRow>
                    <MDBRow className={'mt-3'}>
                        <MDBCol>
                            <MDBContainer fluid={true}>
                                <div>
                                    <PrivateRoute exact path="/" component={HomePage}/>
                                    <Route path="/login" component={LoginPage}/>
                                    <Route path="/register" component={RegisterPage}/>
                                </div>
                            </MDBContainer>
                        </MDBCol>
                    </MDBRow>
                </Router>
                <MDBRow>
                    <MDBCol>
                        <Footer/>
                    </MDBCol>
                </MDBRow>
            </MDBContainer>
        );
    }

Answer 1

创建另一个自定义 css 文件，然后像这样为登录框定义一个包装器类:

      margin: 0 auto;
      width: 100%;
      }
   body{
      min-height: 100vh;
      }