maryamsitedar
New Member
این مشکل تمامی طراحان وب بوده از زمانی که طراحی وب از صفحه بندی با table به div گرایش پیدا کرد و سوالی که برای اکثر طراحان مطرح بود آن بود که چگونه می توانم پس زمینه با 100% ارتفاع داشته باشم در لایه بندی چند ستونی.
چندین روش برای حل این مشکل وجود دارد که در این بخش یک روش آن را بیان می نمایم که ممکن است در حالات زیر مورد استفاده پروژه شما واقع شود:
- تصاویر پس زمینه، بردرها، افکت های CSS3 مورد استفاده برای ستون های شما
- بیشتر از سه ستون
- ارتفاع و عرض انعطاف پذیر
نمایش پیش فرض پس زمینه
تصویر بالا یک قالب سه ستونی می باشد که قالب ها به صورت پیش فرض به سمت چپ فلوت شده اند. هر ستون پس زمینه خود را دارد و پس زمینه به ارتفاع محتوای موجود در آن در می آید. این مورد جالی برای کاربران سایت نیست زیرا تغییر در ارتفاع باعث عدم نظم صفحات وب سایت از نظر چشمی می گردد. که HTML برای این سه لایه از قرار زیر است:
<div class="wrap">
<div class="content">...</div>
<div class="sidebar">...</div>
<div class="sidebar_two">...</div>
</div>
و کد CSS تصویر بالا:<div class="content">...</div>
<div class="sidebar">...</div>
<div class="sidebar_two">...</div>
</div>
.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-elementswidth: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%;
}
زمانی که در مورد ستون های با ارتفاع یکسان صحبت می نمایم قصد بر آورده کردن دو مورد را داریم:
- ستون می بایست به اندازه محتوای خود فضا داشته باشد
- ستون ها می بایست مستقل از محتوای وجود و در صورت نیاز ارتفاع فضای خود را افزایش دهند
.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;
}
که در نهایت ستون های ما با حالت زیر در می آید: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;
}
[/FONT][/COLOR]http://google.com/Xmm9FP[COLOR=#000000][FONT=Tahoma]
این کد چگونه کار می کند
مطابق تصویر زیر :before به مانند المان در بر دارنده المان فعلی عمل می نماید که ارتفاع آن با توجه به CSS در نظر گرفته شده به اندازه ارتفاع المان در بر گیرنده سه ستون
wrap
می باشد.[/FONT][/COLOR]http://google.com/D2jLcc[COLOR=#000000][FONT=Tahoma]
نکته مهم: ستون های شما می بایست داخل المانی باشند که موقعیت آن position: relative; باشد تا absolute positioning آنها عمل نماید.
کمتر و بیشتر از سه ستون
برای انجام همین کار تا سه ستون و با استفاده از :before و :after می توانید مقاله Nicolas Gallagher را مطالعه نمایید. برای ستون های بالاتر از این تعداد نیز می توانید از "background holder" استفاده نمایید.
لینک منبع:
http://webdesign.tutsplus.com/tutor...-the-equal-height-column-conundrum--cms-20403
سورس:
رفع مشکل ارتفاع یکسان ستون ها در طراحی وب
آخرین ویرایش: