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

بتاريخ الآن قال مهند باهرمز:

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

 

 

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

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

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

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

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

بتاريخ 3 دقائق مضت قال 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 دقائق مضت قال مهند باهرمز:

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

لقد قمت بتجربة ال 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}

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

بتاريخ 7 دقائق مضت قال عمر قره محمد:

قم بإعطاء العنصر 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>

فما الحل ؟ 

بتاريخ 31 دقائق مضت قال مهند باهرمز:

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

لقد قمت بالتجربة ولكن أيضًا لم يتحرك ال 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

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

بتاريخ 3 ساعة قال عمر قره محمد:

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

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

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

بتاريخ 29 دقائق مضت قال مهند باهرمز:

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

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

min-height: 100vh;

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

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

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

fixed-bottom

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

بتاريخ 10 دقائق مضت قال عمر قره محمد:

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

min-height: 100vh;

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

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

بتاريخ 19 دقائق مضت قال عمر قره محمد:

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

fixed-bottom

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

فما الحل ؟ 

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

بتاريخ 17 دقائق مضت قال مهند باهرمز:

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

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

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

فما الحل ؟ 

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

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

min-height: 100vh;

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

بتاريخ 3 دقائق مضت قال عمر قره محمد:

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

min-height: 100vh;

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

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

بتاريخ 3 دقائق مضت قال مهند باهرمز:

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

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

عدله للشكل :

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

بتاريخ 16 دقائق مضت قال عمر قره محمد:

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

عدله للشكل :

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

 

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