جشنواره بهارانه راکت! ۳۵% تخفیف ویژه بر روی دورههای آموزشی
مشاهده دورههاسلام. من میخوام با توجه به اینکه محتوای صفحه چقدر ارتفاع میگیره فوتر همیشه پایین صفحه قرار بگیره ولی اگر صفحه اسکرول بخوره یا اینکه محتوا همه ی ارتفاع صفحه رو بگیره فوتر به هم میریزه. من از کلاس sticky-footer استفاده کردم ولی بازم درست نشده. ممنون میشم کمک کنید
@kamaran.davar
@MehdiAghighi
<footer style={{width:'100%'}} className="sticky-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>
شما میتونید یه کلاس سی اس اس بهش بدید که همیشه پایین صفحه تون فیکس باشه
.fix{
position: fixed;
left : 0;
botton : 0;
width : 100%;
}
المنت مادر رو display:flex
قرار بدید و همچنین flex-direction:column
و min-height: 100vh
کانتیر اصلی رو به این شکل کار کنید:
{
flex: 1
}
فوتر رو به این شکل کار کنید:
{
flex: 0;
}
@nimageneral
با این روشی که گفتین پایین صفحه فیکس میشه و واسش فرقی نداره که اگر صفجه اسکرول بخوره بازم پایین باشه. و در واقع فیکس شده و درست کار نمیکنه. تنظیمات من این هست
سلام
برداشت من از صحبت تون اینه که:
بخش میانی (محتوا) اندازه ش متغیر هستش.
حالا شما می خواید:
1) اندازه صفحه 100 درصد باشه
2) اگر مقدار محتوا کم بود: همچنان بخش پایینی بچسبه به انتها
3) اگر هم مقدار محتوا زیاد بود، بخش میانی نوار چرخ بخوره، بخش بالایی و پایینی ثابت باشند.
درست متوجه شدم؟
کدهای زیر رو براساس توضیحات بالا نوشتم:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fix footer</title>
<style>
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
min-height: 100vh;
}
main {
flex: 1;
text-align: center;
overflow-y: auto;
font-size: 60px;
}
header, footer {
height: 150px;
text-align: center;
}
header { background-color: blue }
footer { background-color: green }
</style>
</head>
<body>
<header>header</header>
<main>
<p>add or remove paragraphs for test</p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
<p>testing</p>
</main>
<footer>footer</footer>
<script>
</script>
</body>
</html>
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟