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

Здравствуйте! В продолжении темы Блочная верстка на 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>
Читать далее

Вступите в группу, и вы сможете просматривать изображения в полном размере

		Это интересно 0	Как всё будет выглядеть в блоге: Как сделать колонки одинаковыми по высоте Здравствуйте! В продолжении темы Блочная верстка на CSS рассмотрим такой распространенный случай, когда надо сделать так чтобы колонки были одной высоты Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchim-html/13814220/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Как сделать колонки одинаковыми по высоте </a> <div class="insert-intro" style="font-family:trebuchet MS;">Здравствуйте! В продолжении темы Блочная верстка на CSS рассмотрим такой распространенный случай, когда надо сделать так чтобы колонки были одной высоты </div> </div> Как сделать колонки одинаковыми по высоте <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/uchim-html/13814220/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Как сделать колонки одинаковыми по высоте</a> <div style="font-family:trebuchet MS;">Здравствуйте! В продолжении темы Блочная верстка на CSS рассмотрим такой распространенный случай, когда надо сделать так чтобы колонки были одной высоты </div> </div>

webguru

01.06.2017

В избранное Пожаловаться Просмотров: 259

Комментарии ⁰

Учим HTML 56

Активные участники:

Последние откомментированные темы:

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

Комментарии временно отключены

Премодерируемое участие
902 участника