آموزش یکسان سازی ارتفاع ستونها در طراحی سایت
رعایت برخی نکات ریز در طراحی سایت باعث افزایش زیبایی و کارایی سایت خواهند شد، یکی از این نکتهها، یکسان بودن ارتفاع ستونهای موجود در سایت است که در حالت پیشفرض ارتفاع آنها بر اساس محتوای داخلی تعیین میشود. در ادامه انواع روشهای مختلف برای یکسان کردن ارتفاع ستونهای سایت را بررسی خواهیم کرد.
روش اول: با استفاده از کتابخانهی جیکوئری
ابتدا jQuery را در سایت فراخوانی کنید:
1 |
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script> |
برای این منظور به ستونها (div) کلاس blocks را بدهید و کدهای جاوااسکریپت زیر را به محتوای صفحه اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
// these are (ruh-roh) globals. You could wrap in an // immediately-Invoked Function Expression (IIFE) if you wanted to... var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(); function setConformingHeight(el, newHeight) { // set the height to something new, but remember the original height in case things change el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"))); el.height(newHeight); } function getOriginalHeight(el) { // if the height has changed, send the originalHeight return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")); } function columnConform() { // find the tallest DIV in the row, and set the heights of all of the DIVs to match it. $('.blocks').each(function() { // "caching" var $el = $(this); var topPosition = $el.position().top; if (currentRowStart != topPosition) { // we just came to a new row. Set all the heights on the completed row for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPosition; currentTallest = getOriginalHeight($el); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push($el); currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); } // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); }); } $(window).resize(function() { columnConform(); }); // Dom Ready // You might also want to wait until window.onload if images are the things that // are unequalizing the blocks $(function() { columnConform(); }); |
روش دوم: با استفاده از CSS
چنانچه به دلایل مختلف استفاده از جاوااسکریپت یا jQuery برای انجام این کار مناسب نباشد، میتوان به شیوهی زیر و تنها با استفاده از CSS به نتیجه دست پیدا نمود.
در این روش، عنصر والد که ستونها را در خود نگهداری میکند، میبایست این ویژگی CSS را داشته باشند.
1 |
display: table; |
عناصر داخلی که میبایست ارتفاعی ثابت داشته باشند نیز کد CSS زیر را در خود خواهند داشت.
1 |
display: table-cell; |