امروزه وب سایت‌های مدرن توی صفحه اصلی‌شون (home page) بخش‌هایی دارن که در اصطلاح بشون میگیم تمام صفحه (full screen). برای مثال یعنی بخشی که ۹۰% صفحه مرورگر رو می‌پوشونه. برای ساخت و پیاده سازی چنین بخش‌هایی خیلی مرسوم هست که از جاوااسکریپت استفاده کنن. که لازمش زمان و کد زدن زیادِ. برای درک بهتر چندتا از همین سایت‌ها رو در ادامه می‌بینید:
و چند نمونه دیگه: اسپاتیفای، اکسپوژر و واندرکیندر
حالا چطور میتونیم فقط با یک خط css چنین چیزی رو بسازیم ؟
فقط کافیه کد زیر رو بکار ببرید 🙂
.section { height: 100vh; }
(Viewport Height) یعنی در واقع هر ۱vh مساوی‌ست با ۱% از ارتفاع پنجره‌ی مرورگر بدون در نظر گرفتن سایز مرورگر. این یک روش قدرتمند وسریعِ که کلی کاربرد متفاوت میتونید ازش داشته باشید. درمورد پیشتیبانی مرورگرها باید بگم ۷۸٫۳۸% مرورگرها ازش پشتیبانی میکنن. برای جزئیات بیشتر به Caniuse.com سر بزنید.
دیدن سورس کد | دیدن دموی آنلاین
منبع: +
عالی حاجی، عالی
لطف داری امین جان.
خیلی خوبه
همیشه اندازه Height مشکل بوده واسه من توی اکثر طراحی ها
خوشحالیم که مفید واقع شده آیدین جان : )
فوق العاده بود. شده وقتی که واسه همین مشکل سه روز وقتم گرفته شده!
خیلی عالیه! اتفاقا برای من همین چند هفته پیش نیاز مبرم بود که با کلی بدبختی و به روش دیگه ای شبیه سازی کردم!
در مورد ساپورتش هم امیدوارم این کمپانی ها سر ساپورت کد ها با هم به یه هماهنگی برسن که طراحان وب رو اینقدر به دردسر نندازن!