VPF::растянуть div по высоте - Форум программистов

Antony41

Дата 26.12.2010, 10:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 332
Регистрация: 27.12.2008

Репутация: нет
Всего: 1

Уже не знаю что и делать...
Нужно, чтобы высота блока 2 изменялась в соответствии с высотой блока 2 и наоборот...

Код


<div style="border: 1px solid black; position: relative; width: 100%">
    <!-- Блок1 -->
    <div style="border: 1px solid yellow; width:40%; height: 100%; float:left">
    <p>&nbsp</p><p>&nbsp</p><p>&nbsp</p><p>&nbsp</p><p>&nbsp</p>
    </div>
    
    <!-- Блок 2 -->
    <div style="border: 1px solid red; width:40%; height: 100%;float: right">
    не растягивается!!!
    </div>
</div>

DenWeb

Дата 26.12.2010, 11:51 (ссылка)

(нет голосов)

Загрузка ...

Верстальщик

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 26.12.2010

Репутация: 2
Всего: 2

Код


<div style="border: 1px solid black;  width: 100%; overflow:hidden;">
    <!-- Блок1 -->
    <div style="border: 1px solid yellow; width:40%; height: 100%; float:left; padding-bottom:1000px;
    margin-bottom:-1000px;">
    <p>&nbsp</p><p>&nbsp</p><p>&nbsp</p><p>&nbsp</p><p>&nbsp</p>
    </div>
    
    <!-- Блок 2 -->
    <div style="border: 1px solid red; width:40%; height: 100%;float: right; padding-bottom:1000px;
margin-bottom:-1000px; ">
    не растягивается!!!
    </div>
</div>

Antony41

Дата 26.12.2010, 12:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 332
Регистрация: 27.12.2008

Репутация: нет
Всего: 1

ничего себе глюк!!! smile

спасибо! а вообще существуют другие способы? таким способом не видно нижней части рамки

DenWeb

Дата 26.12.2010, 12:38 (ссылка)

(нет голосов)

Загрузка ...

Верстальщик

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 26.12.2010

Репутация: 2
Всего: 2

Чтобы рамку видно было, можно так:

Код


<div style="display:table-cell;width:50%">
<div style="display:table-row">
<div style="display:table-cell;background:#fff; border: 1px solid black">Колонка1<br>Колонка1<br>Колонка1<br>Колонка1</div>
<div style="display:table-cell;background:#fff; border: 1px solid black">Колонка2<br>Колонка2</div>
</div>
</div>

Еще вариант:

Код


<style type="text/css">
.col-wrap1 {
width:25%;
border:1px solid #000; 
}
 
.col-wrap2 {
width:200%;
margin-right:-100%; /* чтобы IE6 не раздвигал контейнер */
position:relative;
left: 100%;
border:1px solid #000; 
}
 
.col1 {
float:left;
width:50%;
margin-right:-100%;
position:relative;
left:-50%;
}
 
.clear {
clear:both;
font-size:0;
overflow:hidden; /* для IE */
}
</style>
<div class="col-wrap1">
<div class="col-wrap2">
<div class="col1">left column<br>left column<br>left column<br>left column<br></div>
<div class="col2">center column</div>
<div class="clear"></div>
</div>
</div>

Это сообщение отредактировал(а) DenWeb - 26.12.2010, 12:45

Antony41

Дата 26.12.2010, 13:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 332
Регистрация: 27.12.2008

Репутация: нет
Всего: 1

спасибо огромное!!!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »