این مشکل تمامی طراحان وب بوده از زمانی که طراحی وب از صفحه بندی با table به div گرایش پیدا کرد و سوالی که برای اکثر طراحان مطرح بود آن بود که چگونه می توانم پس زمینه با ۱۰۰% ارتفاع داشته باشم در لایه بندی چند ستونی.
چندین روش برای حل این مشکل وجود دارد که در این بخش یک روش آن را بیان می نمایم که ممکن است در حالات زیر مورد استفاده پروژه شما واقع شود:
- تصاویر پس زمینه، بردرها، افکت های CSS3 مورد استفاده برای ستون های شما
- بیشتر از سه ستون
- ارتفاع و عرض انعطاف پذیر
شرح مشکل از قرار زیر می باشد:
نمایش پیش فرض پس زمینه
تصویر بالا یک قالب سه ستونی می باشد که قالب ها به صورت پیش فرض به سمت چپ فلوت شده اند. هر ستون پس زمینه خود را دارد و پس زمینه به ارتفاع محتوای موجود در آن در می آید. این مورد جالی برای کاربران سایت نیست زیرا تغییر در ارتفاع باعث عدم نظم صفحات وب سایت از نظر چشمی می گردد. که HTML برای این سه لایه از قرار زیر است:
<div class=”content”>…</div>
<div class=”sidebar”>…</div>
<div class=”sidebar_two”>…</div>
</div>
و کد CSS تصویر بالا:
width:60%;
float:left;
padding: 20px 30px;
background: #fff;
color: #6d7072;
}
.sidebar {
width:20%;
float:left;
padding: 20px 30px;
background: #5f6673;
color: #ebeef3;
font-size: 90%;
}
.sidebar_two {
width:20%;
float:left;
padding: 20px 30px;
background: #434750;
color: #ebeef3;
font-size: 90%;
}
راه حل: استفاده از المان های کاذب pseudo-elements
زمانی که در مورد ستون های با ارتفاع یکسان صحبت می نمایم قصد بر آورده کردن دو مورد را داریم:
- ستون می بایست به اندازه محتوای خود فضا داشته باشد
- ستون ها می بایست مستقل از محتوای وجود و در صورت نیاز ارتفاع فضای خود را افزایش دهند
در مورد مثال ما، پس زمینه به اندازه فضای محتوا وجود دارد و فقط نیاز است پس زمینه می بایست تا انتهای فضای موجود کشیده شود. بنابراین در صورتی که قصد داریم پس زمینه ها تنظیمات ارتفاع متفاوتی داشته باشند، می توانیم ارتفاع را به گروه المان آن اختصاص دهیم. برای انجام این کار می بایست از pseudo-elements استفاده نماییم. برای هر کدام از ستون ها از :before استفاده می نماییم تا یک pseudo-element ایجاد گردد. با تلفیق مکان کامل absolute positionin و z-index پس زمینه را به صورتی در نظر می گیرم تا تمام بخش را در بر گیرد. کد CSS جدید از قرار زیر است:
width:60%;
}
.content {
float:left;
padding: 20px 30px;
color: #6d7072;
}
.content:before {
content: ”;
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 0;
background: #fff;
}.sidebar, .sidebar:before {
width:20%;
}
.sidebar {
float:left;
padding: 20px 30px;
color: #ebeef3;
font-size: 90%;
}
.sidebar:before {
content: ”;
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 60%;
background-color: #5f6673;
}
.sidebar_two, .sidebar_two:before {
width:20%;
}
.sidebar_two {
float:left;
padding: 20px 30px;
color: #ebeef3;
font-size: 90%;
}
.sidebar_two:before {
content: ”;
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
left: 80%;
background-color: #434750;
}
سایر مقالات مرتبط :
- بررسی صرافی انلاین بدون نیاز به احراز هویت
- نکاتی برای خرید ایمیل شرکتی و ایرانی
- بهترین برندهای تلویزیون هوشمند کدامند؟
- اهمیت سیگنال رایگان ارز دیجیتال فیوچرز در ترید
- آشنایی با بهترین قالب های چند منظوره در وردپرس
- استفاده از گوگل ادز در ایران چگونه و چطور؟
- خرید سرور خارج از کشور از سرودیتا
- بهترین سئوکار خانم در ایران ❤️ | بهترین سئوکار خانم ایران
- قوی ترین باتری گوشی های سامسونگ و شیائومی در سال 2023
- سرور HP چیست؛ ۴ دلیل برای استفاده از آن
- با بهترین هاستینگ طراحان وب شمالغرب کشور آشنا شوید
- خلاقیت در تولید محتوا | جدیدترین متدهای افزایش خلاقیت محتوا ۲۰۲۳