شرح صفوف ومحتوى الفقرة
في متصفحات الهواتف الذكية، يظهر شريط العنوان العلوي عند فتح الصفحة ثم يتقلص تلقائياً أثناء التمرير لأسفل. وبما أن الوحدة الكلاسيكية 100vh تفترض دائماً أن أشرطة المتصفح مخفية، فإن أسفل القسم المصمم بارتفاع 100vh يختفي مقصوصاً خلف شريط الهاتف فور فتح الصفحة!
عالجت مواصفة CSS الحديثة هذه المشكلة بوحدتين قياسيتين مدعومتين في جميع المتصفحات الحديثة:
- الارتفاع الآمن الأصغر
svh: تمثل100svhالمساحة المرئية الصافية أثناء ظهور أشرطة الهاتف كاملةً، مما يضمن عدم اختفاء أي عنصر سفلي وعدم حدوث قفزات بصرية أثناء التمرير. - الارتفاع الديناميكي الحي
dvh: تتحدث قيمة100dvhلحظياً لتطابق الارتفاع المرئي الفعلي مع اختفاء شريط العنوان أو عودته.
CSS
.hero-panel {
width: 90vw;
height: 55svh;
background-color: midnightblue;
color: white;
font-size: 1.5rem;
}