внутренний блок не растягивает внешний во вертикали
Здравствуйте!
Сейчас если блок l-content меньше высоты страницы, то l-box блок прилипает к нижней границе браузера как надо, но если больше высоты страницы, то вылезает за границы родительского блока l-box . Подскажите пожалуйста, как мне исправить Спасибо
.l-box {
position:relative;
width:1000px;
height:100%;
margin: 0 auto;
min-height: 777px;
background: #11274E url(img/snowflake.jpg) no-repeat right bottom;
}
.l-content {
float:left;
height:1000px;
margin: 40px 0px 0px 80px;
background: #bbf;
}
<div class="l-box">
<div class="l-content">
<div >
<img src="content/1-1.jpg" alt="Smiley face" height="115" width="170" />
<p>dfdf</p>
</div>
</div>
</div>
|
Вложений: 1
Чтобы было ясней, что нужно сделать, нарисовал картинку
|
Цитата:
height:100%; Заменить на min-height: 100%; |
Цитата:
.l-box { ... overflow: hidden; } тогда float элемент растянет родительский можно использовать и другие способы http://learn.javascript.ru/css-float...одителя |
Pavel M., что-то не совсем понятно как
overflow: hidden; даст возможность элементу с float растягивать родителя? |
Цитата:
|
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
.l-box {
position: relative;
width: 1000px;
min-height: 100%;
margin: 0 auto;
overflow: hidden;
background: #11274E;
}
.l-content {
float: left;
height: 1000px;
margin: 40px 0px 0px 80px;
background: #bbf;
}
</style>
</head>
<body>
<div class="l-box">
<div class="l-content">
<p>dfdf</p>
</div>
</div>
</body>
</html>
|
Seva1986,
overflow: hidden; просто скроет "вылезающие" элементы. |
Цитата:
|
Спасибо Вам, действительно overflow: hidden; помогло :)
|
| Часовой пояс GMT +3, время: 17:17. |