سلام. من هر کاری میکنم پوزیشن فوترم رو نمیتونم درست کنم. یه منویی سمت جپ هست که ارتفاعش با باز وبسته کردن منوهاش تغییر میکنه. من میخوام فوتر با توجه به ارتفاع منو همیشه پایین باشه.. چه استایلی باید استفاده کنم؟
@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>
راه حل ها زیادن
اگر از antd استفاده میکنید این مسءله رو قبلا حل کرده:
عنوان لینک مورد نظر
با سلام و شادباش
خیلی ساده با توجه به کد های css شما این راه حله شه کافیه در کلاس footer اینو اضافه کنی
position:fixed;
همینو وبس حتماٌ باید
bottom:0px;
باشه
سلام وقتتون بخیر.
راه حل @rahimiangiz به این صورته که فوتر همیشه پایین window کاربر قراره می گیره نه پایین صفحه.
ببینید این لینک کمکتون می کنه یا نه.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟