كيف أستطيع جعل قسم footer آخر الصفحه في CSS

Salman Bin Mohammed · 1 أكتوبر 2021

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

Min.html.zip

أسامة زيادة · 1 أكتوبر 2021

وعليكم السلام

<section  class="ksa">
 <footer id="footer" >
   <p>
     ©Amber Picture
   </p>
 </footer>
</section>

الأفضل والأصح هو عدم وضع semantic element داخل section يعتبر وسم footer من semantic element وهو معرف أن يوجد في الغالب في أسفل الصفحة . أيضا عند إعطاء خصائص CSS تعطيها لعنصر الأب لا يمكن إعطاء section خائص و footer خصائص أخرى مخالفة للخصائص التي أعطيت لـ section ، لقد حللت المشكلة قمت بحذف الـ section وبقيت على footer لوحده ، كذلك قمت بحذف <div class="anyways" > والبقاء على <section class="slider" > حتى تأتي العناصر تحت بعضها في الصفحة.

class="anyways في أحد خصائصه أن position: absolute; لذلك أتي footer تحت عناصره

أيضا وصلت لصور بالطريقة الصحيحة ، إذا كانت ملفات HTML في ملف و الصور في ملف أخر يجب وضع .. فهي تعبر عن الخروج من الملف الموجود به ملفات HTML.

الكود بالكتابة الصحيحة

<div class="Picture second " >
  <img src="../P/62f7dfde-2ac9-4c64-b7e7-fea6df056d23.jpg" alt="">
</div>

الملف بعد حل المشاكل

Min.html.zip

تم التعديل في 1 أكتوبر 2021 بواسطة أسامة زيادة

Salah Eddin Beriani2 · 3 أكتوبر 2021

يوجد حل بسيط وهو اعطاء مكونات الصفحة الداخلية طول 100vh بحيث يمكن ان يكون لديك

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="min.css" />
  </head>
  <body>
    <header></header>
    <section></section>
    <footer></footer>
  </body>
</html>

ال section فيه المحتوى الرئيسي وهذا بعض ال css

body {
  margin: 0;
}

header {
  width: 100%;
  height: 100px;
  background-color: black;
}
section {
  width: 100%;
  height: 400px;
  background-color: blueviolet;
}
footer {
  width: 100%;
  height: 200px;
  background-color: red;
}

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

باضافة

body {
  margin: 0;
}

header {
  width: 100%;
  height: 100px;
  background-color: black;
}
section {
  width: 100%;
  height: 100vh;//هذا السطر هو ما يحدث الفرق
  background-color: blueviolet;
}
footer {
  width: 100%;
  height: 200px;
  background-color: red;
}

كيف أستطيع جعل قسم footer آخر الصفحه في CSS

السؤال

Salman Bin Mohammed

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

أسامة زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Salah Eddin Beriani2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية