كيف اضع ال footer اسفل الصفحة

Muhannad Bahurmoz · 16 يناير 2023

السلام عليكم ورحمة الله و بركاته,

لدي footer جاهز من bootstrap و اريد وضعه اسفل الصفحة في الموقع , و عندما حاولت فعل ذلك استطعت أن اضعه اسفل الشاشة وليس اسفل الصفحة ,

كيف اضعه اسفل الصفحة ؟

هذا هو ال footer :

<footer class="text-center text-lg-start text-white" style="background-color: #3e4551;">

    <div class="container p-3 pb-0">
        <section class="mb-1 text-center">
            <!-- Github -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-github"></i></a>

            <!-- Linkedin -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-linkedin-in"></i></a>

            <!-- Instagram -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-instagram"></i></a>
        </section>
    </div>

    <!-- Copyright -->
    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
        <span>&copy; <span id="footerDate"></span> Copyright:</span>
        <a class="text-white" href="#">...</a>
    </div>

</footer>

و شكرًا لكم

عمر قره محمد · 16 يناير 2023

بتاريخ On 16‏/1‏/2023 at 15:01 قال مهند باهرمز:

لا أعلم لماذا يعمل معي بالشكل التالي :

أظهر المزيد

اعتقد ان ذلك لحدث لأنك تضع الخاصية للعنصر container الموجود داخل الـ footer بينما الصحيح ان تضع الخاصية للعنصر container الموجود قبل الـ footer والذي يحتوي مكونات الصفحة الرئيسية.

والفكرة من الخاصية السابقة هي ان العنصر الذي يسبق الـ footer سيصبح اطول وبالتالي لن يبقى هنالك فراغ في الصفحة بعد الـ footer

Kais Hasan · 16 يناير 2023

هناك خاصيتين يمكنك استعمالهما لذلك، هما ال bottom و ال fixed-buttom، الأولى تقوم بوضع ال footer أسفل الموقع بشكل كامل، أي لا يظهر حتى تقوم بالنزول إلى آخر الموقع، أما الثانية فتقوم بوضعه في أسفل الشاشة، أي دائماً يكون ظاهراً أسفل الشاشة حتى و أنت تقوم بالنزول أو الصعود في الموقع.

هذه الخواص يمكننا وضعها ضمن الخاصية class طبعاً.

يمكنك القيام بتجريبهما لترى بشكل أفضل تأثير كل منهما.

Muhannad Bahurmoz · 16 يناير 2023

بتاريخ On 16‏/1‏/2023 at 08:38 قال Kais Hasan:

هناك خاصيتين يمكنك استعمالهما لذلك، هما ال bottom و ال fixed-buttom، الأولى تقوم بوضع ال footer أسفل الموقع بشكل كامل، أي لا يظهر حتى تقوم بالنزول إلى آخر الموقع، أما الثانية فتقوم بوضعه في أسفل الشاشة، أي دائماً يكون ظاهراً أسفل الشاشة حتى و أنت تقوم بالنزول أو الصعود في الموقع.

يمكنك القيام بتجريبهما لترى بشكل أفضل تأثير كل منهما.

أظهر المزيد

مرحبًا قيس , بدايتًا اشكرك على مساعدتي ,

لقد قمت بتجربة ال bottom ولكن لم يتحرك ال footer ,

وضعت ال bottom في السطر الأول من الاكواد التالية :

<footer class="text-center text-lg-start text-white" style="background-color: #3e4551; bottom: 0px;">

    <div class="container p-3 pb-0">
        <section class="mb-1 text-center">
            <!-- Github -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-github"></i></a>

            <!-- Linkedin -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-linkedin-in"></i></a>

            <!-- Instagram -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-instagram"></i></a>
        </section>
    </div>

    <!-- Copyright -->
    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
        <span>&copy; <span id="footerDate"></span> Copyright:</span>
        <a class="text-white" href="#">...</a>
    </div>

</footer>

عمر قره محمد · 16 يناير 2023

بتاريخ On 16‏/1‏/2023 at 08:50 قال مهند باهرمز:

مرحبًا قيس , بدايتًا اشكرك على مساعدتي ,

لقد قمت بتجربة ال bottom ولكن لم يتحرك ال footer ,

وضعت ال bottom في السطر الأول من الاكواد التالية :

<footer class="text-center text-lg-start text-white" style="background-color: #3e4551; bottom: 0px;">

    <div class="container p-3 pb-0">
        <section class="mb-1 text-center">
            <!-- Github -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-github"></i></a>

            <!-- Linkedin -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-linkedin-in"></i></a>

            <!-- Instagram -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-instagram"></i></a>
        </section>
    </div>

    <!-- Copyright -->
    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
        <span>&copy; <span id="footerDate"></span> Copyright:</span>
        <a class="text-white" href="#">...</a>
    </div>

</footer>

أظهر المزيد

قم بإعطاء العنصر body الخاصية التالية :

body{min-height 100vh}

وهذا كفيل بأن يحل المشكلة.

Muhannad Bahurmoz · 16 يناير 2023

بتاريخ On 16‏/1‏/2023 at 09:08 قال عمر قره محمد:
قم بإعطاء العنصر body الخاصية التالية :
body{min-height 100vh}
وهذا كفيل بأن يحل المشكلة.
أظهر المزيد

مرحبًا عمر , اشكرك على مساعدتي ,

لقد قمت بالتجربة ولكن أيضًا لم يتحرك ال footer , فأضفت الخاصية bottom مجددًا ولكن بلا جدوى ! ,

هذه الخواص :

body {
    min-height: 100vh;
}

#footer {
    bottom: 0px;
}

و هذا ال footer :

<footer class="text-center text-lg-start text-white" id="footer" style="background-color: #3e4551;">

    <div class="container p-3 pb-0">
        <section class="mb-1 text-center">
            <!-- Github -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-github"></i></a>

            <!-- Linkedin -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-linkedin-in"></i></a>

            <!-- Instagram -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-instagram"></i></a>
        </section>
    </div>

    <!-- Copyright -->
    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
        <span>&copy; <span id="footerDate"></span> Copyright:</span>
        <a class="text-white" href="#">...</a>
    </div>

</footer>

فما الحل ؟

عمر قره محمد · 16 يناير 2023

بتاريخ On 16‏/1‏/2023 at 09:20 قال مهند باهرمز:

مرحبًا عمر , اشكرك على مساعدتي ,

لقد قمت بالتجربة ولكن أيضًا لم يتحرك ال footer , فأضفت الخاصية bottom مجددًا ولكن بلا جدوى ! ,

هذه الخواص :

body {
    min-height: 100vh;
}

#footer {
    bottom: 0px;
}

و هذا ال footer :

<footer class="text-center text-lg-start text-white" id="footer" style="background-color: #3e4551;">

    <div class="container p-3 pb-0">
        <section class="mb-1 text-center">
            <!-- Github -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-github"></i></a>

            <!-- Linkedin -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-linkedin-in"></i></a>

            <!-- Instagram -->
            <a class="btn btn-outline-light btn-floating m-1" href="#" role="button">
                <i class="fab fa-instagram"></i></a>
        </section>
    </div>

    <!-- Copyright -->
    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
        <span>&copy; <span id="footerDate"></span> Copyright:</span>
        <a class="text-white" href="#">...</a>
    </div>

</footer>

فما الحل ؟

أظهر المزيد

على ما يبدو أن المشكلة ليست في ال footer

هل يمكنك مشاركة كامل ملفات المشروع،

Muhannad Bahurmoz · 16 يناير 2023

بتاريخ On 16‏/1‏/2023 at 09:53 قال عمر قره محمد:

على ما يبدو أن المشكلة ليست في ال footer

هل يمكنك مشاركة كامل ملفات المشروع،

أظهر المزيد

EV-website.rar هذه كامل ملفات المشروع باستثناء مجلد node_modules

تم التعديل في 16 يناير 2023 بواسطة مهند باهرمز

عمر قره محمد · 16 يناير 2023

بتاريخ On 16‏/1‏/2023 at 13:21 قال مهند باهرمز:

EV-website.rar هذه كامل ملفات المشروع باستثناء مجلد node_modules

أظهر المزيد

قم بإعطاء الخاصية نفسها :

min-height: 100vh;

للعنصر صاحب الكلاس container .

ويمكنك تعديل الارتفاع من 100 إلى المقاس الذي يناسبك

او يمكنك اضافة الكلاس التالي للـ footer :

fixed-bottom

Muhannad Bahurmoz · 16 يناير 2023

لقد قمت بتجربتهم سابقًا ولكنهم لم يضبطوا ,

بتاريخ On 16‏/1‏/2023 at 13:53 قال عمر قره محمد:
قم بإعطاء الخاصية نفسها :
min-height: 100vh;
للعنصر صاحب الكلاس container .
أظهر المزيد

هذه الخاصية اعتقد أنها لا تناسب جميع الصفحات لأنها تحرك ال footer من الأسفل فقط ولا تحركه من الأعلى, أي يكون بالشكل التالي :

بتاريخ On 16‏/1‏/2023 at 13:53 قال عمر قره محمد:
او يمكنك اضافة الكلاس التالي للـ footer :
fixed-bottom
أظهر المزيد

و هذه الخاصية تثبت ال footer اسفل الشاشة و انا لا أريد تثبيته على الشاشة بل أريده أسفل الصفحة ,

فما الحل ؟

و شكرًا لك أ.عمر

عمر قره محمد · 16 يناير 2023

بتاريخ On 16‏/1‏/2023 at 14:17 قال مهند باهرمز:

لقد قمت بتجربتهم سابقًا ولكنهم لم يضبطوا ,

هذه الخاصية اعتقد أنها لا تناسب جميع الصفحات لأنها تحرك ال footer من الأسفل فقط ولا تحركه من الأعلى, أي يكون بالشكل التالي :

و هذه الخاصية تثبت ال footer اسفل الشاشة و انا لا أريد تثبيته على الشاشة بل أريده أسفل الصفحة ,

فما الحل ؟

و شكرًا لك أ.عمر

أظهر المزيد

هل جربت أن تعطي الخاصية :

min-height: 100vh;

للعنصر صاحب الكلاس container

Muhannad Bahurmoz · 16 يناير 2023

بتاريخ On 16‏/1‏/2023 at 14:35 قال عمر قره محمد:
هل جربت أن تعطي الخاصية :
min-height: 100vh;
للعنصر صاحب الكلاس container
أظهر المزيد

اجل و كانت النتيجة كما في الصورتين الاخيرة الذي ارفقتها في الاعلى

تم التعديل في 16 يناير 2023 بواسطة مهند باهرمز

عمر قره محمد · 16 يناير 2023

بتاريخ On 16‏/1‏/2023 at 14:37 قال مهند باهرمز:

اجل و كانت النتيجة كما في الصور السابقة

أظهر المزيد

لقد عمل الكود لدي، لاحظ :

عدله للشكل :

<div class="container" style="min-height: 100vh;">

Muhannad Bahurmoz · 16 يناير 2023

بتاريخ On 16‏/1‏/2023 at 14:43 قال عمر قره محمد:
لقد عمل الكود لدي، لاحظ :

عدله للشكل :
<div class="container" style="min-height: 100vh;">
أظهر المزيد

لا أعلم لماذا يعمل معي بالشكل التالي :

كيف اضع ال footer اسفل الصفحة

السؤال

Muhannad Bahurmoz

13 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

Kais Hasan

Muhannad Bahurmoz

عمر قره محمد

Muhannad Bahurmoz

عمر قره محمد

Muhannad Bahurmoz

عمر قره محمد

Muhannad Bahurmoz

عمر قره محمد

Muhannad Bahurmoz

عمر قره محمد

Muhannad Bahurmoz

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية