HTML вёрстка:

         <div id="wrapper">
            <div id="content" class="clearfix">
                <div id="main-content" class="clearfix">
                    <div class="innerpad">
                        <div class="content-id">#id: main-content</div>
                        [Центральная информационная часть страницы]
                    </div>
                </div>
            </div>
            <div id="sidebar" class="clearfix">
                    <div class="innerpad">
                        <div class="content-id">#id: sidebar</div>
                        [Левая колонка]
						<ul>
							<li>Пункт меню</li>
							<li>Пункт меню</li>
							<li>Пункт меню</li>
							<li>Пункт меню</li>
							<li>Пункт меню</li>
							<li>Пункт меню</li>
							<li>Пункт меню</li>
						</ul>
                    </div>
            </div>
            <br class="clear" />
            <div id="header">
                    <div class="innerpad">
                        <div class="content-id">#id: header</div>
                        [Шапка сайта]
                    </div>
            </div>
            <div id="footer">
                    <div class="innerpad">
                        <div class="content-id">#id: footer</div>
                        [Подвал сайта]
                    </div>
            </div>
       </div>

Напишем небольшой javascript:

/** регистрируем вызов
необходимых функций после
загрузки страницы **/
if(typeof window.addEventListener != "undefined"){
    window.addEventListener("load", setEqualHeight, false);
} else if(typeof window.attachEvent != "undefined"){
    window. attachEvent("onload", setEqualHeight);
}
/** функция установки одинаковой высоты
для правой(левой) колонки и центральной
части **/
function setEqualHeight(){
    var sidebar 			   	    = document.getElementById("sidebar");
    var mainContentBlock            = document.getElementById("content");
    var maxHeight		            =   sidebar.offsetHeight >
                                        mainContentBlock.offsetHeight
                                        ? sidebar.offsetHeight
                                        : mainContentBlock.offsetHeight;
    mainContentBlock.style.height   = maxHeight + "px";
    sidebar.style.height 		    = maxHeight + "px";
}

   А так же усложним немного макет вёрстки, добавим класс clearfix для левой (правой) колонки #sidebar, и id центральной части #content.

   Заметка: если для элемента div задано обтекание текстом – float, тогда родительский div «теряет» свою высоту (а в нашем случае: если в левой колонке #sidebar, центральной колонке #content для дочерних div ов будет задано свойство float).

   Здесь нам помогут несколько правил css:

 .clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html > body .clearfix {
	display: block;
	width: 100%;
}
* html .clearfix {
	height: 1%;
}

   И персональный хак для IE 6.0 – 7.0 (добавляем в head секцию):

<!--[if lte IE 6]>
<style type="text/css">
.clearfix {height: 1%;}
</style>
<![endif]-->
<!--[if IE 7.0]>
<style type="text/css">
.clearfix {display: inline-block;}
</style>
<![endif]-->

   Вот так выглядит пример в Вашем браузере:

#id: main-content
[Центральная информационная часть страницы]

  В итоге у нас получается замечательный двух - колоночный макет с левой колонкой #sidebar и основного содержимого #content одинаковой высоты.

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Добавить комментарий


Яндекс.Метрика