چگونه یک تگ Div تمام صفحه ایجاد کنیم؟

0
181
Viewport

viewport

در CSS 3 چندین واحد جدید معرفی شد یکی از این واحد ها، واحد viewport هستش که دیگه تقریبا توسط تمام مرورگر ها پشتیبانی میشه (زمانی فقط اینترنت اکسپلورر ازش پشتیبانی می کرد) و قصد دارم بشما نشون بدم به کمک این واحد چطوری می تونیم یک سایت تمام صفحه (Full Screen) بدون اسکرول های افقی و عمودی داشته باشیم! خوشحال باشید دیگه نیازی به جاوا اسکریپت نیست خخخ 😉 خوب viewport اصلا چیه؟ به کمک این واحد المان های داخل صفحه رو می تونیم با توجه به سایز فعلی پنجره مرورگر تغییر اندازه بدیم. مثلاً هر وقت سایز مرورگر رو بزرگتر کنیم سایر تگ Div هم به همان نسبت تغییر اندازه بده. درکل خیلی شیبه همون استفاده از درصد در اندازه هاست. برای اطلاع بیشتر یه سرچ کوچیک بزنید 🙂

واحد viewport که برای اندازه عرضی vw و برای اندازه ارتفاعی vh هستش برابر است با ۱/۱۰۰ اندازه عرضی یا ارتفاعی صفحه مرورگر، مثلا برای اینکه در ارتفاع اندازه المان مورد نظر کاملا صفحه مرورگر رو پر کند باید بنویسیم:

چگونه یک تگ Div تمام صفحه ایجاد کنیم؟

کافیست کد زیر رو برای تگ Div یا هر تگ دیگه بصورت یک کلاس یا id استفاده کنید:

اگر سوالی دارید ازم بپرسید تا جوابشو هر هفته اینجا بخونید! موفق باشید 🙂

دیدگاهتان را بنویسید