Регулиране на височината на контейнери в оформлението divami, магистър-уеб
Мисля, че всички, които осъзнават ползите от оформлението на слоеве за оформление на маса, или не може да се обърне внимание на един, както за мен, като един значителен недостатък на модела на блок. Какво е това? Това е височината konteynerov.Rabotaya по друг проект, аз се опитах няколко решения на този проблем, както и с когото искам да ви запозная с тази статия.
За съжаление, ако използваме оформление три- или две колони за налагане на "пластове", резултатът ще е височината на контейнерите е напълно независима от височината на съседните блокове. И ще зависи пряко съдържание блок, положени върху нея и правила отстъп (подложка). Въпреки всичките си недостатъци, на масата, така да се каже, сами по себе си да реши този проблем, по силата на връзката на съседни колони. В случай на използване на блоковете на изхода имаме напълно независими контейнери.
Примерна страница
маса оформление
Пример оформление на "слоеве"
Така, например, трябва да се приведе в съответствие от височината на съда, независимо от тяхното съдържание. Има два основни начина да направите това. Първият от тях е единствено за решение за дизайн, и Ние ще заменим съдържанието на второ място за използване.
Използването isklyuchitelnoCSS
Така че, най-добрият начин е наречен "False колона" и неговата същност е много проста и банална. Много добро описание на този метод може да се намери в Дан Sederholm Faux Колони. Според този пример се използва фоново изображение, на което повторението вертикално, и в резултат получава ефект равни високоговорителите на височина.
фон: #ccc URL (../ изображения / bg_birch_800.gif) повтаря-у 50 0%;
Същността му се състои в това, че първият съотношение се изчислява ширини колона от пиксели при различна разделителна способност, а след това всичко това се изразява в проценти, а след това на фоновото изображение, което създава илюзията за колоната, се възлага на позиционирането на определен процент, според изчислените данни.
Рецепция може да се използва в продължение на две или три колони, само в случай на трите колони трябва да се добави още един суб-контейнер в оформлението.
Огромен плюс на този метод - това е чист CSS. Въпреки това е добре, а след това, когато прави граници на контейнерите, използвани в своя дизайн концепция. Но, за съжаление, тази техника не може да се прилага към проекта, в блоковете, които са пригодени (заоблени) ъгли.
В случай на използване на заоблени ъгли, не можех да правя без Ние ще заменим съдържанието на употреба.
Има много възможности за писане на скриптове, за да се реши проблема с височината на говорителите. Избрах три скриптове, които можете да използвате в различни решения за различни проблеми.
Аз го вкопана в кофите за боклук www.dynamicdrive.com той е широко използван като част от готовата основните оформления, които са представени на сайта като шаблон.
Той се прилага много просто. Трябва да копирате скрипт «equalcolumns.js» на скриптове си указател или в указателя, който използвате за това на вашия сайт. И след това да предпише връзката към сценария в кода на страницата между
:За сценария за работа в оформлението си искате да промените основните настройки в скрипта тук:
ddequalcolumns.columnswatch = [ «leftcolumn», «rightcolumn», «contentwrapper»]
Съответно «leftcolumn», «rightcolumn», «contentwrapper» - за промяна на имената на вашите стилове.
Тествах го лично, в крайна сметка получи пълната подкрепа на резултата в FireFox 1.0 и по-висока, Opera версия 7 и Safari. За съжаление, IE6-7 се вижда много странен бъг, изрязване долния. По-скоро долен колонтитул момента, но това не може да бъде поправено в рамките на видимата област на прозореца на браузъра, винаги се появява скрол площ + долен колонтитул. Въпреки това тествани само на един модел, оформлението, и е възможно, когато друго изпълнение позиционирането на тази грешка не ще контейнери. Опитайте се да направите това на етикетите им.
- PVII еднаква височина CSS Колони - основно само със същото име от други разработчици и други скриптове, за да направите това.
Принципът на прилагането на стандартната сценария - между тагове
кода си, поставете линк към сценария:Въпреки това, за скрипт, за да работи, трябва да маркирате
Добави призива на криптата:При зареждане заявка съдържа селекция от включването на сценария (1 = да, 0 = няма), както и списък с променливи, gdec1 - клас или номер на името на съда, към който сценария, P - е последната за избор, който се използва в този контейнер.
В примерите на сайта на разработчиците всичко работи добре. Въпреки това, по отношение на динамичен модел на крайното местоназначение на селектора привлечени не винаги, крайният селектора може да варира. Като алтернатива, поставете селектора директно в оформлението. Но като цяло, по отношение на оформлението, което е било изпитвано първия сценарий, той не работи. Отново ще отбележа, че в един обичаен неподвижен скрипт трябва да работи - експеримент.
И накрая, третата заповед. Това за мен лично, като че ли най-атрактивните и доказано работеща в рамките на марката за изпитване на 100%.
- Script максимален избор височина на контейнера с допълнение .class на, като аргумент на Djamil Legato и Анди Милър. Сценарият изисква за своята работа Mootools 1.11
Принципът тук е самата сценария:
Var maxHeight = функция (име на класа)
VAR divs = document.getElements ( "DIV. '+ име на класа);
макс = Math.max (макс, div.getSize () size.y.);
maxHeight.delay (500, maxHeight "sameheight ');
"Sameheight" - това е само името на класа, който се използва като аргумент. Разбира се, можете да го наричат каквото си искате.