مشکل با footer

سلام. من هر کاری میکنم پوزیشن فوترم رو نمیتونم درست کنم. یه منویی سمت جپ هست که ارتفاعش با باز وبسته کردن منوهاش تغییر میکنه. من میخوام فوتر با توجه به ارتفاع منو همیشه پایین باشه.. چه استایلی باید استفاده کنم؟
@kamran.davar
@MehdiAghighi

css ای که استفاده کردم:

.footer {
  height: 101px;
  bottom: 0;
  background-color: #f8f9fa;
  line-height: 15px !important;
  width: calc(100%);
  /* margin-top: calc(100vh - 46px); */
}

این هم کد فوتر :

 <React.Fragment>
                <footer className="footer">
                    <div className="d-block w-100 ">
                        <p className="text-muted text-center top-8 pt-2">
                            <strong className="text-center" >{this.state.appInfo.product}</strong>
                        </p>
                        <p className="text-muted text-center">
                            <a >
                                v<span >{this.state.appInfo.version}</span>
                                <sup style={{ display: 'none' }} >(debug)</sup>
                                <sup>(testing)</sup>
                            </a>
                        </p>
                        <p className="text-muted text-center">
                            Built at
        <span> </span><span >{dateformat(this.state.appInfo.buildDate, "dd/mm/yyyy, h:MM:ss TT")}</span>
                        </p>
                        <p className="text-center "><small><a href="http://www.gapsolutions.com.au/" target="_blank" rel="noopener" >{this.state.appInfo.copyright}</a></small></p>
                    </div>
                </footer>

            </React.Fragment>

فایل App.js

<React.Fragment>
                <div  >
                    <div>
                        {/* topbar menu */}
                        {this.state.isAuthenticated ? (
                            <Topbar
                                SidebarShowAndHide={this.SidebarShowAndHide}
                                showSidebar={this.state.showSidebar}
                                auth={this.state.isAuthenticated}
                            />
                        ) : null}
                    </div >
                    <div style={{ display: "flex" }}>
                        {/* sidebar menu */}
                        <div>
                            <Sidebar auth={this.state.isAuthenticated} />
                        </div>
                        <div style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
                            <div>
                                <BreadcumbText />
                            </div>
                            <div className="container-fluid pb-3"
                            >
                                <Switch>
                                    {process.env.NODE_ENV !== "production" ? (
                                        <Route
                                            path="/"
                                            exact={true}
                                            render={(props) => (
                                                <LoginForm
                                                    {...props}
                                                    auth={this.state.isAuthenticated}
                                                    login={this.handleLogin.bind(this)}
                                                />
                                            )}
                                            component={LoginForm}
                                        />
                                    ) : (
                                            ""
                                        )}
                                    <PrivateRoute
                                        path="/settings/accounts"
                                        component={Accounts}
                                        activeRoute={["", "Settings", "Accounts"]}
                                        icon={"fa-fw fas fa-book"}
                                        auth={this.state.isAuthenticated}
                                    />

                                </Switch>
                            </div>
                            <div>
                                <Footer />
                            </div>
                        </div>
                    </div>
                </div>
            </React.Fragment>