пишет:
Здравствуйте! В продолжении темы Блочная верстка на 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>
В данном случае, если в главном блоке много текста, то блок с меню имеет недостаточную длину. Наиболее распространенным решением данной проблемы является оборачивание плавающего элемента и блока, его обтекающего, в отдельный элемент, у которого устанавливается фон. Затем этот фон используется наименьшим по длине блоком. В итоге получается иллюзия, что блоки имеют равную длину, а фон у блоков установлен корректно.
Вступите в группу, и вы сможете просматривать изображения в полном размере
Это интересно
+1
|
|||
Последние откомментированные темы:
-
Обзор смартфона LG Optimus L9
(1)
hobert
,
01.03.2022
-
Антивирусные приложения Android для защиты устройства
(1)
Наталья_ласточка
,
27.02.2022
-
Как отключить уведомления от Сбербанк за 60 рублей через приложение Сбербанк онлайн и ещё 5 методов!
(1)
bbob
,
15.02.2022
-
Обходим блокировку сайтов.
(3)
Евгений_к
,
07.02.2022
20251120230947