مشكلة الترويسة وتذييل الصفحة في HTML CSS

ArabicPro

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

حاولت صنع قالب صفحة فيه ترويسة وتذييل صفحة وفي الصفحة نص طويل فلم أستطيع معرفة برمجة جعل الترويسة وتذييل تكرر في الصفحة بحيث لا يكون النص خلفها أو مختفي.

الرجاء من المحترفين والخبراء المساعدة في كود جاهز لقالب صفحة فيه ترويسة [اسم شركة] وتذييل صفحة [عنوان الشركة] وفي الوسط نص طويل بحيث لو أعطيت أمر طباعة للصفحة أن تظهر الترويسة والذييل في كل الصفحات وأن يكون هناك رقم الصفحة ، وشكراً مقدماً لمن يساعدني في برمجة هذا الكود.


التعليق السابق

نعم؛ ولكن المشكلة أن الكلام يختفي خلف الصورة (التذييل) في بعض الصفحات، والصفحة الأخير لو كان فيها نص قليل يرتفع ذييل الصفحة

هل جربت المثال المرفق؟

const headerTmpl = `<div> header template example </div>`;
const footerTmpl = `<div> footertemplate example </div>`;

var header = document.querySelector('#header-component');
var footer= document.querySelector('#footer-component');

header.innerHTML = headerTmpl;
footer.innerHTML = footerTmpl;

طبعا فإنه سيجب عليك استبدال قيمتي الثابتين headerTmpl  و footerTmpl  بما يوافقهما لديك.

راجع الخطوات السابقة.

هل تظهر أي رسائل أخطاء في الطرفية console؟

جربتها المشكلة أن الترويسة لا تتكرر دائماً وكذلك التذيل والمشكلة الأخرى أن آخر صفحة لو كان فيها النص قليل ربع صفحة التذييل يرتفع للأعلى، وما هو console وكيف أستخدمه