لغز لمطوري المواقع html&css
لدي هدر للصفحة بارتفاع ثابت 100 بكسل
و فوتر بارتفاع ثابت 50 بكسل
و جدول بينهما بارتفاع متغير
كيف استطيع تحديد ارتفاع أدنى للجدول في الوسط بحيث لا يكون الفوتر أعلى من الحافة السفلية للمتصفح (في الشاشات الكبيرة مثلا )
لغز لمطوري المواقع html&css
وظيفة calc هي الحساب بكل بساطة، ولكنها على عكس الحساب في معالجات css (مثل less و sass و stylus) فهي ليست محدودة في الوحدات، في sass مثلا لا تستطيع أن تطرح px من % ولا تستطيع خلط أي وحدات
ولكن في calc تستطيع أخذ 100% من الصفحة، وأخذ 15px منها. كما ترى هي ديناميكية
الوحدة التي استخدمتها أنا هي vh وترمز إلى vertical height وهي مثل النسب المئوية، ولكنها مطلقة، أيّ تنسب إلى حجم الصفحة وليس حجم الحاوي، ف100vh هي 100% من إطار النافذة
روعة
عملت معي بشكل ممتاز
مشكلتها فقط عدم دعم بعض المستعرضات القديمة و متصفح Opera Mini 8 حسب ما بحثت
شكرا للرد
لدعم معظم المتصفحات
/* IE-OLD */
width: expression(1000px - 500px);
/* Firefox */
width: -moz-calc(1000px - 500px);
/* WebKit */
width: -webkit-calc(1000px - 500px);
/* Opera */
width: -o-calc(1000px - 500px);
/* Standard */
width: calc(1000px - 500px);
لا تحتاج لتحديد إرتفاع أدنى بل يمكنك القيام بهذا من خلال bottom: 0; أرجوا أن يكون هذا ماطلبت.
لم أفهم قصدك بالتحديد لكن أظنك تقصد مثل هذا :
أو خاصية @media واستخدام max-height :
ليس فقط stiky footer
المطلوب هو تغير ارتفاع الجدول الاوسط بحسب ارتفاع الشاشة
الحل باستخدام
خاصية @media و min-height
لكن المشكلة ان الكود الناتج معقد و طويل
و لم اجد كود ابسط
مع تحياتي
على حسب فهمي لموضوعك , يمكنك أستخدام @media بالقياس الخاص بالشاشة
وثم أستخدام min-height بوحدة قياس % أو em
=)
تبحث لتحسين عملك أو مهنتك؟ زيارة هذا الموقع محدثة لمحة كاملة وندوات عبر الإنترنت. وتوفر هذه الشركة أفضل الأدوات والمعارف والتعويض والمنتجات
التعليقات