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