كيف أستطيع جعل قسم 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;
}