Как сделать колонки одинаковыми по высоте

Оцените материал
(0 голосов)

Здравствуйте! В продолжении темы Блочная верстка на CSS рассмотрим такой распространенный случай, когда надо сделать так чтобы колонки были одной высоты. Рассмотрим проблему на примере:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
            body, h2, p{
                margin:0;
                padding:0;
            }
            body{
                font-size: 18px;
            }
            #header{
                background-color: #eee;
                border-bottom: 1px solid #ccc;
                height: 80px;
            }
            #menu{
                background-color: #ddd;
                float: left;
                width: 150px;
            }
            #main{
                background-color: #f7f7f7;
                border-left: 1px solid #ccc;
                margin-left: 150px;
                padding: 10px;
            }
            #footer{
                border-top: 1px solid #ccc;
                background-color: #dedede;
            }
        </style>
    </head>
    <body>
        <div id="header"><h2>Сайт MySyte.com</h2></div>
        <div id="menu">
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Блог</a></li>
                <li><a href="#">Контакты</a></li>
                <li><a href="#">О сайте</a></li>
            </ul>
        </div>
        <div id="main">
            <h2>What is Lorem Ipsum?</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                has been the industry...</p>
        </div>
        <div id="footer">
            <p>Copyright © MySyte.com, 2016</p>
        </div>
    </body>
</html>

Просмотреть  пример

 

 В данном случае, если в главном блоке много текста, то блок с меню имеет недостаточную длину. Наиболее распространенным решением данной проблемы является оборачивание плавающего элемента и блока, его обтекающего, в отдельный элемент, у которого устанавливается фон. Затем этот фон используется наименьшим по длине блоком. В итоге получается иллюзия, что блоки имеют равную длину, а фон у блоков установлен корректно.

Так, изменим выше созданную страницу следующим образом:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
            body, h2, p{
                margin:0;
                padding:0;
            }
            body{
                font-size: 18px;
            }
            #header{
                background-color: #eee;
                border-bottom: 1px solid #ccc;
                height: 80px;
            }
            #wrapper{
                background-color: #ddd;
            }
            #menu{
                float: left;
                width: 150px;
            }
            #main{
                background-color: #f7f7f7;
                border-left: 1px solid #ccc;
                margin-left: 150px;
                padding: 10px;
            }
            #footer{
                border-top: 1px solid #ccc;
                background-color: #dedede;
            }
        </style>
    </head>
    <body>
        <div id="header"><h2>Сайт MySyte.com</h2></div>
        <div id="wrapper">
            <div id="menu">
                <ul>
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">Блог</a></li>
                    <li><a href="#">Контакты</a></li>
                    <li><a href="#">О сайте</a></li>
                </ul>
            </div>
            <div id="main">
                <h2>What is Lorem Ipsum?</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                    has been the industry...</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                    has been the industry...</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                    has been the industry...</p>
            </div>
        </div>
        <div id="footer">
            <p>Copyright © MySyte.com, 2016</p>
        </div>
    </body>
</html>

Просмотреть  пример

 В данном случае плавающий блок menu и обтекающий его блок main обертываются в один элемент wrapper, в котором устанавливается фон для элемента menu. А элемент main, как наибольший элемент, может использовать собственную установку фона.

Также можно использовать jquery-плагин equalHeight. Об этом подробнее в видео.

Прочитано 514 раз Последнее изменение Воскресенье, 04 сентября 2016 13:16
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+