Последните стандарти не позволяват използването на височина 100% (height: 100%), което довежда до големи главоболия при реализирането на голяма част от дизайните. Разбира се дизайнерите предпочитат да използват цялото поле на екрана, дори да няма достатъчно съдържание, за да го запълни и това довежда до големи главоболия за разработчиците. Вариантите за реализиране са 2, единият е използването на javascript, а другият използването на height:100% въпреки че не е позволено. Разбира се и двата варианта имат редица недостатъци.
1. Javascript –използването на javascript за реализирането на дизайн ми се струва лошо решение, защото от една страна част от посетителите на сайта може да са с изключен javacript и да не видят нищо от блестящите идеи. При посетители с по-бавен интернет сайта ще им подскача доста неприятно, особено ако се чака Onload event-а. Могат да настъпят един куп събития, който да променят размера на съдържанието и за всички тях трябва да следим, за да не се получава неприятно счупване на дизайна. Като цяло се очертава доста сериозна работа заради реализирането на определен дизайн, затова е хубаво добре да се обмислят всички варианти преди вземането на този избор. Няма да описвам с код конкретно решение, защото в зависимост от ситуацията и нуждите кода ще бъде съвсем различен. Вероятно в друга тема ще публикувам няколко конкретни решения само на тема height 100% с javascript
2. HTML – най-разпространения начин за разтягане на максимум по височина е следният:
на главните HTML и BODY тагове се задава височина 100% през CSS или директно в стиловете на таговете. След това се задава height: 100% на всички елементи, който искаме да бъдат с тази височина, като особено важно е, че за да бъде един елемент висок 100%, трябва всички негови родители също да бъдат високи 100%. Ето кратък пример:
в CSS файла:
html,body{
margin:0;
padding:0px;
height:100%;
}
в HTML файла:
<body>
<div style=”height: 100%”>
<div style=”height: 100%”></div>
</div>
</body>
По този начин ще се получи желание ефект и наистина ще имаме високи 100% елементи. Но ако пуснем HTML валидатор, той ще се разсърди на тази стойност. Също така сме ограничени, защото ако дизайна е по-сложени и включва градиенти в различни посоки и разни детайли, който изискват допълнителна логика, ще ни бъде много трудно да се справим, дори може да се окаже че варианта с js ще бъде по-лесен за реализиране.
Ако сте открили по-добро решение или имате въпроси или идеи, ще се радвам да ги споделите!
Забравете за -таговете.
Използвайте таблици. Илюзия е, че “тежат” при зареждане или че с тях се работи трудно. С 5 реда код можете да направите неща, които с дивовете са немислими.
Див-а е недомислица, налагана напук на логиката и традицията в уеб, а не решение на проблеми.
Можете да използвате стилове и за таблиците.
Решение с таблици:
А) Сайт с фиксирана ширина по-малка от предполагаемия размер на екрана (напр. 840 px)
Създавате една основна таблица с 1 колона. На таблицата и на колоната задавате ширина и височина 100%. В нея вграждате още една таблица с фиксирания размер на ширина с колкото колони са ви нужни.
Ако имате background на цял екран – описавате го в стиловия шаблон и го поставяте като клас в основната таблица. Таг остава свободен на него също можете да задавате свойства.
Б) Страница, разтегляща се по размерите на екрана.
Решението е подобно на първото с тази разлика, че може би ще ви се наложи да работите с относителни стойности за основната таблица и за следващите, вградени в нея. Няма проблем да вграждате в тях таблици с фиксиран размер.
Хоризонталното и вертикалното подравняване стават по добрия стар начин с HTML-стойности в -тага: ALIGN=”LEFT / CENTER / RIGHT” и VALIGN=”TOP / MIDDLE / BOTTOM”. И разбира се, изпълняват се без изключение от всички браузъри.
Ще ви кажат, че това не е по стандартите?
Грешка!
СТАНДАРТ НЯМА. Има фантазни бълнувания na самозабравилите се технократи от W3C и реалност, в която всеки нов браузър продължава да интерпретира отлично стария, отритнат HTML. Няма как да бъде другояче докато все още съществуват милиони сайтове, разчитащи на по-старите технологии.
Стандарт е система от правила, недопускаща изключения.
Ако някога сте работили с логически език, изпълняван в строга среда бихте осъзнали разликата. Там няма валидиран и невалидиран код, а работещ код или съобщение за грешка.
PS: използвай htmlspecialchars(); вместо strip_tags(); за да обезопасяваш входящите низове. Все пак блога ти е свързан с уеб-разработка.