مشکل با فوتر
سلام. من میخوام با توجه به اینکه محتوای صفحه چقدر ارتفاع میگیره فوتر همیشه پایین صفحه قرار بگیره ولی اگر صفحه اسکرول بخوره یا اینکه محتوا همه ی ارتفاع صفحه رو بگیره فوتر به هم میریزه. من از کلاس 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>