مشکل با فوتر

آفلاین

Parastoo Ebrahimi ( 44849 تجربه )

2 هفته پیش

تخصص : front-end developer

سلام. من میخوام با توجه به اینکه محتوای صفحه چقدر ارتفاع میگیره فوتر همیشه پایین صفحه قرار بگیره ولی اگر صفحه اسکرول بخوره یا اینکه محتوا همه ی ارتفاع صفحه رو بگیره فوتر به هم میریزه. من از کلاس sticky-footer استفاده کردم ولی بازم درست نشده. ممنون میشم کمک کنید
@kamaran.davar
@MehdiAghighi

footer

<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>

Html-Css

آفلاین

نیما - ش ( 47982 تجربه )

@nimageneral

2 هفته پیش

تخصص : برنامه نویس وب

شما میتونید یه کلاس سی اس اس بهش بدید که همیشه پایین صفحه تون فیکس باشه

.fix{
    position: fixed;
    left : 0;
    botton : 0;
    width : 100%;
}

آفلاین

محمد عابدی ( 10090 تجربه )

@abedim910

2 هفته پیش

تخصص : Senior Web Developer

المنت مادر رو display:flex قرار بدید و همچنین flex-direction:column و min-height: 100vh
کانتیر اصلی رو به این شکل کار کنید:

{
flex: 1
}

فوتر رو به این شکل کار کنید:

{
flex: 0;
}

آفلاین

Parastoo Ebrahimi ( 44849 تجربه )

@parastooebrahimi

2 هفته پیش

تخصص : front-end developer

@abedim910
flex:0 یا flex: 1 اصلا وجود داره ؟

آفلاین

Parastoo Ebrahimi ( 44849 تجربه )

@parastooebrahimi

2 هفته پیش

تخصص : front-end developer

@nimageneral
با این روشی که گفتین پایین صفحه فیکس میشه و واسش فرقی نداره که اگر صفجه اسکرول بخوره بازم پایین باشه. و در واقع فیکس شده و درست کار نمیکنه. تنظیمات من این هست scroll

آفلاین

میلاد-م ( 233175 تجربه )

@milad

2 هفته پیش

تخصص : طراح رابط کاربری - Front-End

سلام
برداشت من از صحبت تون اینه که:
بخش میانی (محتوا) اندازه ش متغیر هستش.
حالا شما می خواید:
1) اندازه صفحه 100 درصد باشه
2) اگر مقدار محتوا کم بود: همچنان بخش پایینی بچسبه به انتها
3) اگر هم مقدار محتوا زیاد بود، بخش میانی نوار چرخ بخوره، بخش بالایی و پایینی ثابت باشند.
درست متوجه شدم؟

آفلاین

میلاد-م ( 233175 تجربه )

@milad

2 هفته پیش

تخصص : طراح رابط کاربری - Front-End

کدهای زیر رو براساس توضیحات بالا نوشتم:

<!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>

آفلاین

akam nejati ( 10993 تجربه )

@akamnejati

1 هفته پیش

تخصص : دانش اموز و در حال یاد گیری

با این کد کارت را میفته

position: absolute;  
bottom: 0;

برای ارسال پاسخ باید وارد سایت شوید

آموزش برنامه‌نویسی