سوال معمولی که در طراحی وب سایت مطرح می شود این است که "شما چگونه ارتفاع یک عنصر را به 100 درصد می دهید"؟
این ممکن است مانند یک پاسخ آسان به نظر برسد. شما به سادگی از CSS برای تنظیم ارتفاع یک عنصر به 100٪ استفاده می کنید، اما این کار همیشه این عنصر را به تمام پنجره مرورگر تساوی ندهید. بیایید پیدا کنیم که چرا این اتفاق می افتد و آنچه شما می توانید برای رسیدن به این سبک بصری انجام دهید.
پیکسل ها و درصد
وقتی ارتفاع عنصر را با استفاده از خصوصیت CSS تعریف می کنید و مقداری که از پیکسل ها استفاده می کند، این عنصر فضای عمودی زیادی را در مرورگر می گیرد.
به عنوان مثال، پاراگراف با ارتفاع: 100px؛ 100 پیکسل فضای عمودی در طراحی شما را خواهد گرفت. مهم نیست که پنجره مرورگر شما بزرگتر است، این عنصر به اندازه 100 پیکسل در ارتفاع خواهد بود.
درصد کارها متفاوت از پیکسل است. با توجه به مشخصات W3C، ارتفاع درصد با توجه به ارتفاع کانتینر محاسبه می شود. بنابراین اگر پاراگراف را با ارتفاع قرار دهید: 50٪؛ در داخل div با ارتفاع 100px، پاراگراف 50 پیکسل در ارتفاع خواهد بود که 50٪ از عنصر اصلی آن است.
چرا ارتفاع درصد بالا نمی رود
اگر شما یک صفحه وب را طراحی کرده اید و ستونی دارید که می خواهید ارتفاع کامل پنجره را بپوشید، تمایل طبیعی برای اضافه کردن ارتفاع است: 100٪؛ به آن عنصر پس از همه، اگر شما عرض را به عرض تنظیم کنید: 100٪؛ عنصر فضای کامل افقی صفحه را می گیرد، بنابراین ارتفاع باید همان کار را بکند، درست است؟ متأسفانه این طور نیست.
برای درک اینکه چرا این اتفاق می افتد، باید بدانید که چگونه مرورگر قد و عرض را تفسیر می کند. مرورگرهای وب محدوده پهنای موجود را به عنوان تابع از گسترش پنجره مرورگر محاسبه می کند. اگر هیچ مقادیر عرضی را در اسناد خود تنظیم نکنید، مرورگر به طور خودکار مطالب را برای پر کردن تمام عرض پنجره (عرض 100٪ به طور پیش فرض) جریان می یابد.
ارتفاع ارتفاع به طور متفاوت نسبت به عرض محاسبه می شود. در واقع مرورگرها ارتفاع را به طور کامل ارزیابی نمیکنند مگر اینکه محتوای آنقدر طولانی باشد که خارج از منظره یاب می شود (بنابراین نیازمند نوارهای پیمایش است) یا اگر طراح وب یک ارتفاع مطلق را برای یک عنصر در صفحه تعیین کند. در غیر این صورت، مرورگر به سادگی به محتوای جریان در عرض نمایش viewport اجازه می دهد تا آن را به پایان می آید. ارتفاع در واقع محاسبه نشده است.
مشکلات زمانی رخ می دهد که شما ارتفاع درصد را در یک عنصر که عناصر اصلی بدون ارتفاع تنظیم شده است تنظیم کنید - به عبارت دیگر عناصر والدین ارتفاع پیش فرض دارند: auto؛ . شما در واقع درخواست مرورگر را برای محاسبه ارتفاع از یک مقدار undefined کنید. از آنجا که این یک ارزش صفر است، نتیجه اینست که مرورگر هیچ کاری نمی کند.
اگر می خواهید ارتفاع را در صفحات وب خود به یک درصد تنظیم کنید، باید ارتفاع هر عنصر والدینی که می خواهید ارتفاع تعیین کنید را تنظیم کنید. به عبارت دیگر، اگر شما یک صفحه مانند این دارید:
محتوای اینجا
شما احتمالا دی و پاراگراف را در آن می خواهید ارتفاع 100٪ داشته باشید، اما این div دارای دو عنصر اصلی است:
و به منظور تعریف ارتفاع div به ارتفاع نسبی، شما باید ارتفاع بدن و عناصر HTML را نیز تنظیم کنید.
بنابراین شما نیاز به استفاده از CSS برای تنظیم ارتفاع نه تنها div، بلکه عناصر بدن و HTML. این می تواند یک چالش باشد، زیرا شما می توانید با هر چیزی که به ارتفاع 100٪ تنظیم شده است، به سرعت از بین برود، فقط برای رسیدن به این اثر دلخواه.
برخی از چیزهایی که باید هنگام کار با ارتفاع 100٪ توجه داشته باشید
اکنون که می دانید چطور می توانید ارتفاع عناصر صفحه خود را به 100٪ تنظیم کنید، می تواند هیجان انگیز باشد که بیرون بروید و این کار را به تمام صفحات خود انجام دهید، اما چند چیز که باید از آن آگاه باشید:
- حاشیه ها و بالشتک ها می توانند یک نوار پیمایش را در جایی که شما آن را نمی خواهید اضافه کنید. یکی از آزار دهنده ترین چیزهایی که من با کار با ارتفاع (و عرض) درصد پیدا کردم، اینست که پس زمینه و حاشیه روی آن عناصر همان می توانند نوارهای پیمایش را به صفحه اضافه کنند حتی اگر همه محتوا بدون نیاز به نوارهای پیمایش نمایش داده شود. این به این دلیل است که ارتفاع یا عرض عنصر اولین چیزی است که محاسبه شده است. سپس حاشیه ها و پرده ها اضافه می شوند. بنابراین اگر عنصری با ارتفاع 100٪ داشته باشید و حاشیه بالا و پایین هر 10 پیکسل، یک نوار پیمایش برای 20 پیکسل اضافی وجود دارد. به یاد داشته باشید، مدل جعبه CSS حاشیه، حاشیه و پلاستی را به اندازه یک عنصر اضافه می کند، بنابراین 100٪ با هر یک از این مقادیر مدل جعبه دیگر، در واقع بیش از 100٪ خواهد بود.
- اگر محتوای شما بیش از ارتفاع تعریف شده باشد، پس از آن هر چیزی را بازنویسی می کند. به عبارت دیگر اگر شما دارای یک ستون 80٪ در ارتفاع هستید و محتوی داخل آن 100٪ ارتفاع می گیرد، این 20٪ اضافی زیر ستون ادامه می یابد و طراحی بصری را از بین می برد از صفحه شما اگر محتوای زیر ستون وجود دارد، متن به سادگی در بالای آن نوشته خواهد شد. اغلب این اتفاق می افتد که این اتفاق می افتد زمانی که یک طراح وب تلاش می کند تا ارتفاع یک صفحه را مجبور کند و به طور کامل برای راه اندازی کار کند، اما زمانی که محتوای آن صفحه در آینده تغییر می کند، ارتفاع مطلق آنها جریان جریان صفحه را مختل می کند. این زمانی که شما در حال ساخت وب سایت های پاسخگو هستید، عرض و قد شما باید با اندازه نمایشگر تغییر کند.
برای رفع این، شما می توانید ارتفاع عنصر را نیز تنظیم کنید. اگر آن را به صورت خودکار تنظیم کنید، نوارهای پیمایش ظاهر می شوند، اگر مورد نیاز باشند، اما زمانی که آنها نیستند، ناپدید می شوند. که شکست بصری را رفع می کند، اما نوارهای پیمایش را جایی که ممکن است آنها را نخواهند، اضافه می کند.
با استفاده از Units Viewport
راه دیگری برای مقابله با این چالش این است که با استفاده از CSS Viewport Units کار کنید. با استفاده از واحد اندازه گیری ارتفاع ارتفاع نمایش ، شما می توانید عناصر اندازه را به ارتفاع مشخصی از نمایشگر برسانید و تغییرات را به صورت تغییرات تغییر دهید! این یک راه عالی برای به دست آوردن تصاویر 100٪ قد در یک صفحه است، اما هنوز هم برای دستگاه های مختلف و اندازه صفحه نمایش قابل انعطاف است.