این مشکل تمامی طراحان وب بوده از زمانی که طراحی وب از صفحه بندی با table به div گرایش پیدا کرد و سوالی که برای اکثر طراحان مطرح بود آن بود که چگونه می توانم پس زمینه با 100% ارتفاع داشته باشم در لایه بندی چند ستونی.
چندین روش برای حل این مشکل وجود دارد که در این بخش یک روش آن را بیان می نمایم که ممکن است در حالات زیر مورد استفاده پروژه شما واقع شود:
- تصاویر پس زمینه، بردرها، افکت های CSS3 مورد استفاده برای ستون های شما
- بیشتر از سه ستون
- ارتفاع و عرض انعطاف پذیر
شرح مشکل از قرار زیر می باشد:
نمایش پیش فرض پس زمینه
تصویر بالا یک قالب سه ستونی می باشد که قالب ها به صورت پیش فرض به سمت چپ فلوت شده اند. هر ستون پس زمینه خود را دارد و پس زمینه به ارتفاع محتوای موجود در آن در می آید. این مورد جالی برای کاربران سایت نیست زیرا تغییر در ارتفاع باعث عدم نظم صفحات وب سایت از نظر چشمی می گردد. که HTML برای این سه لایه از قرار زیر است:کد:<div class="wrap"> <div class="content">...</div> <div class="sidebar">...</div> <div class="sidebar_two">...</div> </div>
و کد CSS تصویر بالا:
راه حل: استفاده از المان های کاذب pseudo-elementsکد HTML:.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 استفاده نماییم. برای هر کدام از ستون ها از :before استفاده می نماییم تا یک pseudo-element ایجاد گردد. با تلفیق مکان کامل absolute positionin و z-index پس زمینه را به صورتی در نظر می گیرم تا تمام بخش را در بر گیرد. کد CSS جدید از قرار زیر است:
که در نهایت ستون های ما با حالت زیر در می آید:
کد HTML:.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; }
این کد چگونه کار می کند
مطابق تصویر زیر :before به مانند المان در بر دارنده المان فعلی عمل می نماید که ارتفاع آن با توجه به CSS در نظر گرفته شده به اندازه ارتفاع المان در بر گیرنده سه ستونwrapمی باشد.
نکته مهم: ستون های شما می بایست داخل المانی باشند که موقعیت آن position: relative; باشد تا absolute positioning آنها عمل نماید.
کمتر و بیشتر از سه ستون
برای انجام همین کار تا سه ستون و با استفاده از :before و :after می توانید مقاله Nicolas Gallagher را مطالعه نمایید. برای ستون های بالاتر از این تعداد نیز می توانید از "background holder" استفاده نمایید.
لینک منبع:
Quick Tip: Solving the Equal Height Column Conundrum - Tuts+ Web Design Tutorial
به انجمن امروزی خوش آمدید لطفا وارد شوید یا ثبت نام کنید
پاسخ با نقل قول
نوشته اصلی توسط maryamsitedar
