تهران، سعادت آباد، خیابان کوهستان،
مجتمع کوهستان، سرو ۴، طبقه ۳ واحد ۲
۲۲۱۳۴۴۹۶ ۰۲۱
۳۶۶۶۸۳۲۸ ۰۲۶
info[at]web-city.ir
support[at]web-city.ir

رفع مشکل ارتفاع یکسان ستون ها در طراحی وب

رفع مشکل ارتفاع یکسان ستون ها در طراحی وب

این مشکل تمامی طراحان وب بوده از زمانی که طراحی وب از صفحه بندی با table به div گرایش پیدا کرد و سوالی که برای اکثر طراحان مطرح بود آن بود که چگونه می توانم پس زمینه با ۱۰۰% ارتفاع داشته باشم در لایه بندی چند ستونی.

چندین روش برای حل این مشکل وجود دارد که در این بخش یک روش آن را بیان می نمایم که ممکن است در حالات زیر مورد استفاده پروژه شما واقع شود:

۱- تصاویر پس زمینه، بردرها، افکت های CSS3 مورد استفاده برای ستون های شما
۲- بیشتر از سه ستون
۳- ارتفاع و عرض انعطاف پذیر
شرح مشکل از قرار زیر می باشد:

نمایش پیش فرض پس زمینه
تصویر بالا یک قالب سه ستونی می باشد که قالب ها به صورت پیش فرض به سمت چپ فلوت شده اند. هر ستون پس زمینه خود را دارد و پس زمینه به ارتفاع محتوای موجود در آن در می آید. این مورد جالی برای کاربران سایت نیست زیرا تغییر در ارتفاع باعث عدم نظم صفحات وب سایت از نظر چشمی می گردد. که HTML برای این سه لایه از قرار زیر است:

 <div class=”wrap”>
<div class=”content”>…</div>
<div class=”sidebar”>…</div>
<div class=”sidebar_two”>…</div>
</div>

و کد CSS تصویر بالا:

.content }
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 جدید از قرار زیر است:

.content, .content:before }
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;
{

که در نهایت ستون های ما با حالت زیر در می آید:

رفع مشکل ارتفاع یکسان با CSS

این کد چگونه کار می کند
مطابق تصویر زیر :before به مانند المان در بر دارنده المان فعلی عمل می نماید که ارتفاع آن با توجه به CSS در نظر گرفته شده به اندازه ارتفاع المان در بر گیرنده سه ستون wrap می باشد.

 

ستون ها با ارتفاع یکسان

نکته مهم: ستون های شما می بایست داخل المانی باشند که موقعیت آن ;position: relative باشد تا absolute positioning آنها عمل نماید.

کمتر و بیشتر از سه ستون
برای انجام همین کار تا سه ستون و با استفاده از :before و :after می توانید مقاله Nicolas Gallagher را مطالعه نمایید. برای ستون های بالاتر از این تعداد نیز می توانید از “background holder” استفاده نمایید.

اشتراک

حمیدرضا عباسی

حمیدرضا عباسی هستم، کارشناس نرم افزار و دانشجوی کارشناسی ارشد تجارت الکترونیک، طراح و توسعه دهنده وب سایت و متخخص سئو، از سال ۹۰ به صورت حرفه ای شروع به فعالیت در زمینه طراحی وب سایت کردم و بسیار علاقه مند و مشتاق به استفاده از تکنولوژی های جدید و بروز در زمینه طراحی وب سایت و تجارت الکترونیک هستم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

2 × 4 =