http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1266351793.html <p>Что и говорить, но мой самый не любимый браузер, снова облажался по полной программе.</p> <p>Захотелось мастеру Горди экзотики, а фантазер он в этих делах изрядный, макетик нарисовать сто процентной высоты, все по простенькому ТЗ, кратенькому такому – сущий мизер с бонусом хитрым.</p> <p>Как всегда для этих целей используем:</p> <pre class="pre"> margin-bottom:-32600px;padding-bottom:32600px;</pre> <p>То, что не будут работать метки-якоря, бог с ним, кому они нужны по большому-то счету.</p> <p>Проблема нижнего border’a, тоже особо не волнует, подумаешь пара-тройка дополнительных контейнеров, кого этим не испугаешь :)</p> <p>Пишут же весьма уважаемые "гуру" после float-колонок такое:</p> <pre class="pre"> &lt;div class="clear"&gt;&lt;/div&gt;</pre> <p>И в ус не дуют :)</p> <p>А вот у меня вы этого практически не найдете, в стилях для глобальной разметки web-страницы даже упоминание: <pre class="pre"> clear:both;</pre> <p>отсутствует, потому как нет в том необходимости.</p> <p>Итак, техническое задание:</p> <ul><li>100% процентная высота макета</li> <li>Иллюзия равной высоты колонок центральной части</li> <li>Фоновая заливка и border, у все колонок и блоков - индивидуальны</li> <li>Область контента выводится раньше колонок навигации</li> <li>Header вкупе с горизонтальным меню по html-коду ниже всего</li> <li><strong>Бонус</strong> – в колонках центральной части имеются контейнеры, которые всегда находятся внизу оных, причем при наполнении информацией растут они вверх, понятно, что ограничение на их высоту имеется, как без него :)</li></ul> <p>html-код двух колончного макета - "Content-Right":</p> <pre class="pre"> &lt;body&gt; &lt;div id="middle"&gt; &lt;div class="content"&gt; <span style="color:blue;">&lt;div class="bottom_content"&gt;</span>Content<span style="color:blue;">&lt;/div&gt;</span> &lt;/div&gt; &lt;div class="right"&gt; <span style="color:blue;">&lt;div class="bottom_right"&gt;</span>Right<span style="color:blue;">&lt;/div&gt;</span> &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; Footer <span>&lt;div class="border_content"&gt;&lt;/div&gt; &lt;div class="border_right"&gt;&lt;/div&gt;</span> <span style="color:green;">&lt;div class="footer_content"&gt;</span>Блок content bottom<span style="color:green;">&lt;/div&gt;</span> <span style="color:green;">&lt;div class="footer_right"&gt;</span>Блок right bottom<span style="color:green;">&lt;/div&gt;</span> &lt;/div&gt; &lt;div id="header"&gt;Header&lt;/div&gt; &lt;div id="menus&gt;Горизонтальное меню&lt;/div&gt; &lt;/body&gt;</pre> <p><span>Красным</span> цветом выделены блоки, отвечающие за прорисовку нижнего бордер’а, у колонок центральной части, здесь с помощью абсолютного позиционирования, выталкиваем данные контейнеры из footer'a.</p> <p>То, что в <span style="color:green;">зеленом</span> цвете это и есть блоки, расположенные в низу колонок, также используя position:absolute; выставляем с необходимым зазором над footer’ом, по месту.</p> <p>А вот <span style="color:blue;">синие</span> контейнеры, соль фишки.</p> <p>И хотя в стилях им задано всего одно стилевое правило, оно-то и позволяет не прятаться всему, что располагается вверху колонки, под наш <strong>бонус</strong>.</p> <p>Стили для них таковы:</p> <pre class="pre"> .bottom_content {margin-bottom:95px;} .bottom_right {margin-bottom:325px;}</pre> <p>Эти параметры косвенно задают и определяют в конечном итоге высоту наших блоков. Так как мы применяем абсолютное позиционирование, необходимо контролировать процесс наполнения оных - при наполнении информацией они могут улететь вверх, нырнув под верхнюю границу окна браузера :)</p> <p>А где про OPERA, спросите вы?</p> <p><a href="i/users/opera/opera_01.htm">Пример</a> все покажет, но если у вас нет под рукой этого браузера, то <a href="i/users/opera/opera_01.png">скриншот</a> будет кстати.</p> <p>Отрыв footer’a от нижней границы окна браузера как нельзя лучше, демонстрирует своеобразную интерпретацию абсолютного позиционирования данным браузером.</p> <p>Понятно, что мастер Горди, никогда бы не стал использовать подобного рода, разметку в своих работах, не зная решения проблемы.</p> <p>А попинать OPERA, тут не грех, хотя и не велико сиё удовольствие, но иногда довольно трудно оказаться от представленной возможности, где она, так не хило подставляется в очередной раз :)</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1266351793.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1266351793.html">All Comments</a></div> <!-- RSS_link_to_post end --><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1266351793.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1266351793.html">All Comments</a></div> <!-- RSS_link_to_post end --> Wed, 17 Feb 2010 02:23:13 GMT