колонки одинаковой высоты

Yahoo! · December 6, 2009

http://s16.radikal.ru/i191/0912/26/53f31c5f9e6c.png - нужно что б колонки не просто были одинаковой высоты, но и занимали всё пространство от них до футера не в зависимости от содержимого.

psywalker · December 6, 2009

http://s16.radikal.ru/i191/0912/26/53f31c5f9e6c.png - нужно что б колонки не просто были одинаковой высоты, но и занимали всё пространство от них до футера не в зависимости от содержимого.

Запрос в гугле - Колонки одинаковой высоты :blink:

Yahoo! · December 6, 2009

5 способов, это я знаю :blink: но мне нужно, чтобы эти колонки растягивались в высоту не от самой большой колонки, а занимали всё пространство между шапкой и подвалом (подвал к низу прижат) не в зависимости от содержимого.

Соответственно, способ на фоне не подходит, макет - резина.

Там где много обёрток, слышал, не придумали как подвал вообще прижать.

Там где паддинг+маргин - не поддерживается восьмой оперой.

Другие во внимание вообще не беру, да и потом плюс ещё они ведь принимают высоту самой высокой колонки.

Edited December 6, 2009 by Yahoo!

psywalker · December 6, 2009

5 способов, это я знаю но мне нужно, чтобы эти колонки растягивались в высоту не от самой большой колонки, а занимали всё пространство между шапкой и подвалом (подвал к низу прижат) не в зависимости от содержимого.
Соответственно, способ на фоне не подходит, макет - резина.
Там где много обёрток, слышал, не придумали как подвал вообще прижать.
Там где паддинг+маргин - не поддерживается восьмой оперой.
Другие во внимание вообще не беру, да и потом плюс ещё они ведь принимают высоту самой высокой колонки.

Я бы сделал, но времени нет, да и возиться неохота если честно...Но могу тебе дать намёк-подсказку. Рули в сторону позиционирования

Yahoo! · December 6, 2009

Твоим методом? Опера опять же там косипорит=)

Будет время сделай плиз, вот думаю, может как-то через display: table & table-cell

Edited December 6, 2009 by Yahoo!

psywalker · December 6, 2009

Твоим методом? Опера опять же там косипорит=)

Какая опера?

Yahoo! · December 6, 2009

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

psywalker · December 6, 2009

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

А подвал и хедер в твоёй задаче должны быть фикс по высоте или нет?

Yahoo! · December 6, 2009

в зависимости от размера шрифта т.е. height: xem

psywalker · December 6, 2009

в зависимости от размера шрифта т.е. height: xem

Ладно, будет время, придумаем что нибудь. А пока мне в личку кинь скриншот того, что хочешь получить, с подробным объяснением!

Yahoo! · December 6, 2009

а на том скрине, что в начале темы плохо я объяснил?

psywalker · December 6, 2009

а на том скрине, что в начале темы плохо я объяснил?

Короче я так понял, Хедер и Футер фикс - высота. А между ними три колонки в ряд. Тянуться должны от конца Хедера и до Начала футера?

Yahoo! · December 6, 2009

да

вот намутил, сто пудов не кросс, но в лисе видно норм

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru" dir="ltr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>exelent</title>

<style type="text/css">
html,body{
	width:100%;
	height:100%;
	float:left;
	background:#fff
}
body{margin:0;padding:0}

#page{
	height:100%;
	overflow:hidden;
	min-width:780px
}

#strut{height:4em}

#header{
	height:3em;
	background:red;
	top:0;
	left:0
}

#leftColumn{
	float:left; 
	width:30%;
	min-width:200px; 
	background:gold;
	padding-bottom:30000px;
	margin-bottom:-30000px
}

#content{
	background:blue;
	overflow:hidden;
	height:100%;
	margin-bottom:-4em
}
#centerColumn{
	overflow:hidden; 
	background:#987;
	padding-bottom:30000px;
	margin-bottom:-30000px
}

#rightColumn{
	float:right; 
	width:150px; 
	background:gold;
	padding-bottom:30000px;
	margin-bottom:-30000px
}

#footer{
	height:4em;
	margin-top:-4em;
	background:red;
	position:absolute;
	width:100%
}
</style>

<!--[if lte IE 6]>

<![endif]-->

</head>
<body>
	<div id="page"> 
		<div id="header">heador</div>
		<div id="content">
			<div id="leftColumn">left</div>
			<div id="rightColumn">right</div>
			<div id="centerColumn">center</div>   
			<div id="strut"><!-- распорка для футера --></div>
		</div> 
	</div>
	<div id="footer">footor</div> 
</body>
</html>

что самое главное, надо у #page и #content задавать height:100%, а не min-height:100%

Edited December 6, 2009 by Yahoo!

psywalker · December 6, 2009

1) Ты уверен что в ФФ всё ок?

2)

что самое главное, надо у #page и #content задавать height:100%, а не min-height:100%

Уверен?

Yahoo! · December 6, 2009

1) в 3.5 норм, могу и скрин показать если надо, поэкспериментировав, выяснилось, что всё в ж#опу,если заполнить одну из колонок 2) если задать min-height то просто колонки будут принимать высоту по заполнению, х3 у меня так

psywalker · December 6, 2009

1) в 3.5 норм, могу и скрин показать если надо, поэкспериментировав, выяснилось, что всё в ж#опу,если заполнить одну из колонок 2) если задать min-height то просто колонки будут принимать высоту по заполнению, х3 у меня так

1) Впредь в разделах моего модерирования будет закон (один для всех) и порядок, это касается и нехороших выражений и прочей грязи, поэтому на будущее фразы типа всё в ж#опу, прошу не употреблять.

2) По-сабжу:

в 3.5 норм, могу и скрин показать если надо, поэкспериментировав, выяснилось, что всё в ж#опу,если заполнить одну из колонок 2) если задать min-height то просто колонки будут принимать высоту по заполнению, х3 у меня так

Да, в ФФ нормал при минималке, но вот в ИЕ что-то не очень всё клеется, надо думать дальше.

Yahoo! · December 6, 2009

1) Впредь в разделах моего модерирования будет закон (один для всех) и порядок, это касается и нехороших выражений и прочей грязи, поэтому на будущее фразы типа всё в ж#опу, прошу не употреблять.

Больше не буду=)

Да, в ФФ нормал при минималке, но вот в ИЕ что-то не очень всё клеется, надо думать дальше.

Конечно надо думать дальше. Главное, надо заставить блок-родитель всех колонок - #content растянуться от шапки до футера, а там всё пучком пойдёт(надеюсь).

psywalker · December 6, 2009

Больше не буду=)
Конечно надо думать дальше. Главное, надо заставить блок-родитель всех колонок - #content растянуться от шапки до футера, а там всё пучком пойдёт(надеюсь).

Отлично, дерзай, ты на правильном пути :blink:

Yahoo! · December 6, 2009

спс=)

http://csstemplater.com/

Попробовал тут, а нельзя задать одновременно прижать подвал и колонки одинаковой высоты. Что это значит?=)

psywalker · December 6, 2009

спс=)
http://csstemplater.com/
Попробовал тут, а нельзя задать одновременно прижать подвал и колонки одинаковой высоты. Что это значит?=)

Я вообще не пользуюсь такими вещами, пиши код ручками и правильно :blink:

Игорь Ермаков · December 6, 2009

Скрин обнови.

http://csstemplater.com/

Вот это плохо, не используй, сейчас сгенерировал шаблон, такой бред в коде, причём они ещё не кросс.

Лучше сам делай.

Yahoo! · December 6, 2009

Я просто ради интереса, посмотреть))) сейчас ищу по статьям, люди тоже с такой проблемой сталкивались=)

Yahoo! · December 12, 2009

Я в замешательстве с IE7 и ниже, строки одинаковой высоты:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru" dir="ltr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>index</title>
	<style type="text/css">
	  html, body {width: 100%; height: 100%; float: left}
	  body {margin: 0; padding: 0; background: #fff; oveflow: auto}
	  table, thead, tbody, tfoot, tr, td {margin: 0; padding:0; border-collapse: collapse; vertical-align: top}
	  #page {width: 100%; height: 100%}
		#page thead td {height: 1px; background: gold}
		#page tbody {height: auto}
		#page tfoot td {height: 1px; background: gold}
	  #leftColumn {width: 30%; min-width: 150px; background: pink}
	  #centerColumn {width: 50%; background: #bca}
	  #rightColumn {width: 20%; min-width: 100px; background: #7af}

	</style>

	  <!--[if lte IE 7]><style media="screen">
	  #header, #footer {height: auto;}
	  #content {zoom: 1}
	  </style><![endif]-->

</head>
<body>
	<table id="page">

		<thead>
		<tr>
			<td colspan="3">header</td>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td id="leftColumn">left</td>

			<td id="centerColumn">center</td>
			<td id="rightColumn">right</td>
		</tr>
		</tbody>
		<tfoot>
		<tr>
			<td colspan="3">footer</td>

		</tr>
		</tfoot>
	</table>
</body>
</html>

psywalker · December 12, 2009

И даже не пытайся это сделать, дохлый номер, всё уже проверено до нас. Один вариант задать высоту ячеек в %, чтобы в сумме было 100%

Sign In

колонки одинаковой высоты

Question

Link to comment

Share on other sites

23 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information