Форум

Артем125 · #1 (**permalink**) 27.01.2012, 18:00

Здравствуйте!

Сейчас если блок 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>

Артем125 · #2 (**permalink**) 27.01.2012, 20:11

Чтобы было ясней, что нужно сделать, нарисовал картинку

ksa · #3 (**permalink**) 28.01.2012, 09:43

Сообщение от Артем125

как мне исправить

Убрать точное указание высоты... Например

height:100%;

Заменить на

min-height: 100%;

Pavel M. · #4 (**permalink**) 28.01.2012, 10:37

Сообщение от Артем125

но если больше высоты страницы, то вылезает за границы родительского блока l-box

сделайте, например
.l-box {
...
overflow: hidden;
}

тогда float элемент растянет родительский

можно использовать и другие способы http://learn.javascript.ru/css-float...одителя

ksa · #5 (**permalink**) 28.01.2012, 13:32

Pavel M., что-то не совсем понятно как

overflow: hidden;

даст возможность элементу с float растягивать родителя?

Seva1986 · #6 (**permalink**) 28.01.2012, 15:07

Сообщение от ksa

Pavel M., что-то не совсем понятно как
overflow: hidden;

даст возможность элементу с float растягивать родителя?

ну а что не понятного, также как overflow: hidden; клиарфиксят. он будет в себе вмещать флоаты, и если они растут по высоте, то и он выростит , у него ведь высоты нет жесткой.

Seva1986 · #7 (**permalink**) 28.01.2012, 15:11

<!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>

ksa · #8 (**permalink**) 28.01.2012, 18:17

Seva1986,

overflow: hidden;

просто скроет "вылезающие" элементы.

ksa · #9 (**permalink**) 28.01.2012, 18:20

Сообщение от Seva1986

если они растут по высоте, то и он выростит , у него ведь высоты нет жесткой.

Посмотрел пример от Seva1986... И действительно. До этого я такой эффект не применял, спасибо.

Артем125 · #10 (**permalink**) 28.01.2012, 18:50

Спасибо Вам, действительно overflow: hidden; помогло

Форум

Справочник

Discord чат

Курсы javascript