Как в ИЕ6 флоальнутым блоком растянуть контейнер, у которого overflow: hidden?

Torm · July 12, 2011

Приветствую верстальщиков!

Необходима ваша помощь. Не знаю, как заставить в IE6 растянуться контейнер, в котором лежит прифлоаченный бокс с содержимым.

Вот схематически показываю ситуацию:

HTML:

<body>
	<div class="wrapper">
		<div class="column">Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст</div>
	</div>
</body>

CSS:

html, body {
	margin: 0;
	height: 100%;
}

.wrapper {
	background: #CCC;
	overflow: hidden;
	min-height: 50%;
	position: relative;
}

* html .wrapper {
	height: 50%;
}

.column {
	background: #FF9;
	width: 200px;
	float: left;
	padding-bottom: 32767px;
	margin-bottom: -32767px;
}

Great Rash · July 12, 2011

Убрать overflow: hidden; больше никак.

Torm · July 12, 2011

Так, решение нашел - добавил wrapper'y ширину 100% и убрал это:

* html .wrapper {
        height: 50%;
}

Контейнер сразу стал тянуться.

Но, немного подумав, понял, что мне в этом коде нужна ещё одна колонка и она, к сожалению, не должна иметь float.

Помогите, пожалуйста, добавить её, при этом чтобы вела себя как и первая колонка (та, которая с float)...

HTML:

<body>
	<div class="wrapper">
		<div class="column">Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст<br>Текст</div>
		<div class="column2">Колонка №2</div>
	</div>
</body>

CSS:

html, body {
	margin: 0;
	height: 100%;
}

.wrapper {
	background: #CCC;
	overflow: hidden;
	min-height: 50%;
	width: 100%;
}

.column {
	background: #FF9;
	width: 200px;
	float: left;
	padding-bottom: 32767px;
	margin-bottom: -32767px;
}

.column2 {
	background: #99F;
	margin-left: 200px;
	padding-bottom: 32767px;
	margin-bottom: -32767px;
}

buddah · July 12, 2011

Что значит "вела себя как флоат-колонка"? Уточни.

Ты не хочешь чтоб колонка с флоат растягивалась при растяжении второй колонки или что?

И что это такое:

padding-bottom: 32767px;
        margin-bottom: -32767px;

Edited July 12, 2011 by buddah

Torm · July 12, 2011

buddah, понимаешь, если задать второй колонке флоат, то блок, из которого она состоит, перестанет тянуться вширь. А мне надо, чтобы он тянулся и занимал справа от первой колонки всё свободное место. Кроме этого, вторая колонка должна растягивать враппер по высоте, как это делает первая.

—

padding-bottom: 32767px;
margin-bottom: -32767px;

Это известный приём, который позволяет визуально выровнять колонки по высоте. Паддинг расстягивает вниз очень далеко, а отрицательный марджин не дает контенту колонок уехать далеко вниз. Гигантский скролл убирается свойством overflow: hidden у контейнера, который содержит колонки.

ctpz · July 12, 2011

Давно искал этот прием. Сколько всего не перепробавал, а про overflow:hidden забывал.

Searcher · July 13, 2011

http://blog.sjinks.pro/css/209-cross-browser-liquid-three-column-layout-full-height/

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Sign In

Как в ИЕ6 флоальнутым блоком растянуть контейнер, у которого overflow: hidden?

Question

Torm

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Torm

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

Torm

Link to comment

Share on other sites

ctpz

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information