جلسه دهم: مشکلات تنظیم ارتفاع (Difficulties with element height)
کار با عنصر ارتفاع بسیار متفاوت تر از کار با عنصر عرض می باشد.کدهایی که در مقالات قبلی نوشته شد هم چنان می تواند برای شما کدهای مفیدی باشند اما بهتر است از اینکه عنصر ارتفاع را در ارتباط با عنصر دیگر تعیین کنید خودداری کنید.
قالب اصلی که در حالت نرمال برای داکیومنت تعریف شده است این است که عنصر عرض ثابت و عنصر ارتفاع نامحدود است. محتوا عرض Viewport را پر میکند و استفاده از عنصر linewrap ضروری به نظر می رسد. پس ارتفاع هم از طریق اندازه و حجم محتوا تغییر می کند و هم از طریق اندازه ای که به خود آن اختصاص داده شده است.
منظور از اندازه نرمال صفحه این است که داکیومنت در حالت پیش فرض در چه اندازه ای قرار دارد. عناصر داخلی همراه با محتوا و متن داخل آن زمانی که از چپ و یا راست به لبه container میرسد خط شکسته می شود و به پایین منتقل می شود.
هنگامی که به طور صریح ارتفاع یک عنصر را تعیین میکنید خطر سرریز شدن محتویات آن را دارید. این اتفاق زمانی می افتد که محتوا با محدودیت های تعیین شده متناسب نباشد و از عنصر اصلی خارج شود.
شما می توانید رفتار دقیق محتوای سر ریز شده را به کمک موارد زیر کنترل کنید:
Visible: مقدار پیش فرض می باشد که در این حالت همه محتوا نمایش داده می شود حتی هنگامی که از لبه ها سرریز می شوند .
Hidden : در این حالت بخش هایی که سر ریز می شوند بریده شده و قابل مشاهده نخواهد بود.
Scroll : نوار های پیمایش به container اضافه می شود تا کاربر بتواند برای دیدن باقی مانده محتوا container را پیمایش کند.در برخی از سیستم ها هر دو نوار پیمایش افقی و عمودی نمایش داده می شوند حتی اگر محتوا کامل نمایش داده شود .اما در این حالت میله های نمایش غیرفعال می شوند.
Auto : رمانی اسکرول بار اضافه می شود که محتوا سرریز شود.
توجه ! به طور معمول استفاده از پیمایش خودکار بهترین روش است چرا که در بیشتر موارد نیازی به نوار های پیمایش نیست مگر در موارد ضروری.
در هنگام استفاده از میله های پیمایش با دقت رفتار کنید. مرورگرها برای پیمایش صفحه اسکرول بار را وارد می کنند و اسکرول بارها ممکن است تودرتو شوند و این برای کاربر ممکن است اذیت کنندده شود. با استفاده از ویژگی overflow-x می توانید سرریز عمودی و با کمک overflow-y سرریز افقی را کنترل کنید.در این حالت تنظیم صریح دو مقدار x و y را با مقادیر مختلف تا حدودی جلوی نتایج غیرقابل پیش بینی را می گیرد.
معمولا هنگام تعیین ارتفاع به کمک درصد دردسرساز می شود. درصد به اندازه continerاشاره دارد. در مورد عناصر تو درتو که والد و فرزند محسوب می شوند اندازه درصد فرزند با توجه به والد محاسبه می شود.
یکی از دلایلی که افراد از درصد برای تعیین اندازه ارتفاع استفاده می کنند این است که continer را کاملا پر میکند.راه حل بهتری که وجود دارد استفاده از VH می باشد که در مقالات قبلی در مورد آن صحبت کردیم.اگر ارتفاع را 100vh تعیین کید درست به اندازه view port خواهد بود. کاربرد دیگری که وجودد دارد این است که از آن برای ایجاد ستون هایی با ارتفاع برابر می توان استفاده کرد. این کار بدون استفاده از درصد هم امکان پذیر می باشد.
ستون هایی با ارتفاع برابر:
ساختن ستون هایی با ارتفاع برابر مشکلی است که به عنوان یکی از نقاط ضعف css از ابتدا آزاردهنده بوده است.در اوایل دهه 2000 ، css استفاده از جداول html را برای تععین اندازه layout انتخاب کرد. در آن زمان جداول تنها راه تولید دو ستون با ارتفاع برابر و یا ستون هایی با ارتفاع یکسان بدون تعیین صریح اندازه ارتفاع بودند. اما اگر شما به هر ستون اجازه میدادید که به صورت طبیعی اندازه ستون خود را تعیین کنند هر عنصر با توجه به اندازه محتوای خودش اندازه متفاوتی را پیدا میکرد که این مشکل دوباره دردسر جدیدی می شد.
برای رفع این مشکل چند حرکت خلاقانه نیاز بود. با تکاملCSS راه حل هایی مثل شبه عناصر یا pseudo-elements یا حاشیه های منفی ظاهر شدند. اگر شما هم چنان از این روش ها استفاده می کنید وقت آن رسیده است آن ها را کنار بگذارید و از روش های جدید استفاده کنید.
مرورگرهای مدرن این کار را بسیار ساده تر می کنند. آن ها از جدول های css پشتیبانی می کنند.
توجه ! زمانیکه در مورد مرورگرهای مدرن صحبت می شود منظور نسخه های اخیر مرورگرهاست که به صورت خودکار بروز رسانی می شوند که شامل chrome ، firefox، edge ، opera و در بیشتر موارد safari می باشد. IE همواره بزرگترین نگرانی در این حوزه است.اگر گفته شود چییز در IE10 به بالا پشتیبانی میشود به طور کلی این بدان معناست که مرورگرهای مدرن هم از آن پشتیبانی میکنند.
معمولا در بسیاری از طراحی ها نیاز داریم که از ستون هایی با ارتفاع یکسان استفاده کنیم .مثلا همین صفحه با دو ستون که خواهیم ساخت مثال خوبی است.
هنگام تنظیم ارتفاع دلخواه روی هر ستون می توانید اندازه دلخواه خود را تععین کنید. مثلا اگر اندازه خیلی بزرگ را بدهید مقدار زیادی فضای خالی در پایین container های خود را خواهید داشت و اگر فضا را کمی کوچکتر بدهید و برای نمایش محتوا سرریز رخ خواهد داد.
بهترین راه حل این است که ستون ها باهمان اندازه طبیعی خود باشند و سپس ستونی که کوتاه تر است را گسترش دهید تا ارتفاع آن به مقدار دلخواه شما برسی.
در ادامه خواهید دید که این کار را چگونه ا استفاده از جدول های css-based و flexbox انجام خواهیم داد.
Css table Lauout :
ابتدا شما از یک جدول مبتنی بر CSS استفاده خواهید کرد. به جای استفاده از float ها ابتدا باید کد زیر را برای container خود بنویسید: display: table
و سپس برای هر یک از ستون های خود بویسید: display:table-cell
سپس استایل خود را مطابق کد زیر تغییر دهید:
.container {
display: table;
width: 100%;
}
.main {
display: table-cell;
width: 70%;
background-color: #fff;
border-radius: .5em;
}
.sidebar {
display: table-cell;
width: 30%;
margin-left: 1.5em;
padding: 1.5em;
background-color: #fff;
border-radius: .5em;
}توجه! ممکن است متوجه شده باشید که هیچ عنصر ردیفی در این کد نوشته نشده است. لازم به ذکر است در هنگام استفاده از جدول CSS درج عنصر ردیف به همان اندازه که در جدول html مهم است ، ضرورت ندارد.
به طور پیش فرض عنصری با مقدار نمایش table به اندازه 100% عرض مانند عنصر block گسترش پسدا نمی کند.پس باید عرض آن را به طور صریح اعلام کرد.در این حالت حاشیه های مدنظر شما وجود ندارد چرا که margin ها به عنصر table-cell اعمال نمیشود پس شما باید تغییرات دیگری را نیز ایجاد کنید تا به آن چه واقعا نیاز دارید نزدیک شوید.
برای تعریف فاصله بین سول های یک جدول می توانید از ویژگی border-spacing استفاده کنید.این ویژگی دو مقدار را دریافت می کند . یکی برای فاصله افقی و دیگری برای فاصله عمودی. البته شما می توانید یک مقدار را به هر دو این عناصر اختصاص دهید. مثلا شما میتوانید در کد خود بنویسید: borderspacing: 1.5em
اما این کد تاثیر عجیب دیگری نیز دارد. این مقدار هم در لبه های داخلی و هم در لبه های خارجی اعمال می شود.در این حالت با اینکه اندازه ی داده شده برای border با header یکسان است اما جدول شما با هدر همسو نیست.
شما به کمک یک روش هوشمندانه می توانید این حاشیه اضافی را برطرف کنید..برای اینکار شما نیاز دارید یک container جدید دور کل جدول شما را فرابگیرد.اما چگونه؟
ابتدا container جدید را اضافه کنید و به آن کد زیر را اضافه کنید: margin-right: -1.5em;
تا em 1.5 که از border ایجاد ده است را خنثی کند. در این حالت کد style شما باید مطابق کد زیر باشد:
.wrapper {
margin-left: -1.5em;
margin-right: -1.5em;
}
.container {
display: table;
width: 100%;
border-spacing: 1.5em 0;
}
.main {
display: table-cell;
width: 70%;
background-color: #fff;
border-radius: .5em;
}
.sidebar {
display: table-cell;
width: 30%;
padding: 1.5em;
background-color: #fff;
border-radius: .5em;
}همان طوری که margin های مثبت لبه های را به داخل هل میدهد، margin های منفی هم لبه ها را به خارج می کشد.
اکنون شما layout مورد نظر خود را دارید: دو ستون با ارتفاع یکسان ، فاصله 1.5em و لبه هایی که با هدر هم تراز هستند.
حاشیه های منفی کاربردهای جالب دیگری هم دارند که در ادامه به آن خواهیم پرداخت.
دیدگاهتان را بنویسید