Как работает height в CSS

loggerserg · March 2, 2011

Не могу понять какая логика работы свойства height в ниже приведенном примере.

table.main {
	position: absolute;
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}

Только после добавления position: absolute таблица начинает слушаться и растягивается на всю высоту, хотя width работает корректно в обоих случаях. Без position таблица игнорирует height: 100%, но вполне нормально слушается height: 500px.

Подскажите, где я не дочитал учебники?

Clubberry · March 2, 2011

Ширину и высоту при position: absolute нужно указывать в px.

loggerserg · March 2, 2011

Ширину и высоту при position: absolute нужно указывать в px.

Так в том то и дело, что сначала position использовать НЕ собирался и проценты в height работать отказывались(а пиксели как раз работали). Методом тыка обнаружил, что только при использовании position проценты слушаются как положено. Вот я и не пойму почему.

И еще интересный момент: без position - width работает с процентами как положено, а height нет...

Vlad · March 2, 2011

height в процентах считается от ШИРИНЫ элемента.

psywalker · March 2, 2011

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

height в процентах считается от ШИРИНЫ элемента.

Чавоэто?

Int · March 2, 2011

То есть, для экрана 4:3 нужно указывать 75%? о_О

Vlad · March 2, 2011

Пардон, опечатался.

loggerserg · March 2, 2011

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

Хорошо, это я уяснил, но все равно остается недопонимание...

А именно:

почему в этом вопросе width отличается от height (хотя это можно принять как данность и смириться);

как все же растянуть таблицу по высоте экрана (только с помощью position)?

На всякий случай приведу весь код.

CSS:

body{
	margin: 0;
	padding: 0;
}
table.main {
	position: absolute;
	width: 100%;
	height: 100%;
	border-collapse: collapse;
}
td.top {

}
td.search {

}
td.topmenu {

}
td.news {
	width: 30%;
}
td.text {
	width: 70%;
	height: 100%;
}
td.copyright {

}
td.bottommenu {

}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Заголовок</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<table class="main" border="1">
			<tr>
				<td class="top" colspan="2">	<!-- Top -->
					Top
				</td>
			</tr>
			<tr>
				<td class="search">	<!-- Search -->
					Search
				</td>
				<td class="topmenu">	<!-- Top menu -->
					Top menu
				</td>
			</tr>
			<tr>
				<td class="news">	<!-- News -->
					News
				</td>
				<td class="text">	<!-- Text -->
					Text
				</td>
			</tr>
			<tr>
				<td class="copyright">	<!-- Copyright -->
					Copyright
				</td>
				<td class="bottommenu">	<!-- Bottom men -->
					Bottom menu
				</td>
			</tr>

		</table>
	</body>
</html>

psywalker · March 2, 2011

width растягивается на ширину своего родителя. У блочных элементов. Таблице же надо задавать width всё равно.

Что касается растянуть, то

<table class="main" border="1" style="top: 0; bottom:0; position: absolute; width: 100%; background: red;">

SelenIT · March 2, 2011

как все же растянуть таблицу по высоте экрана (только с помощью position)?

Нет, можно явно задать html, body { height: 100%; }. Без этого у body получается height: auto, и унаследовать высоту окна браузера не получается (цепочка рвется).

psywalker · March 2, 2011

Нет, можно явно задать html, body { height: 100%; }. Без этого у body получается height: auto, и унаследовать высоту окна браузера не получается (цепочка рвется).

Ааа, а я подумал, что position принципиально.

PanSoul · March 2, 2011

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

Ну и у IE настроишь высоту, иначе скролл появится

Edited March 2, 2011 by PanSoul

SelenIT · March 2, 2011

и у IE настроишь высоту, иначе скролл появится

Сорри, можно пример? Я еще понимаю, что может появиться из-за вываливания маргинов потомков body (заголовков, абзацев и т.п.), но как раз в IE (ниже 8) именно с этим проблем быть не должно...

psywalker · March 2, 2011

Сорри, можно пример? Я еще понимаю, что может появиться из-за вываливания маргинов потомков body (заголовков, абзацев и т.п.), но как раз в IE (ниже 8) именно с этим проблем быть не должно...

Вроде тоже не замечал. Примерчик не помешал бы.

loggerserg · March 2, 2011

Нет, можно явно задать html, body { height: 100%; }. Без этого у body получается height: auto, и унаследовать высоту окна браузера не получается (цепочка рвется).

Вот спасибо! А я то думаю, зачем html, body указывают 100%...

Всем спасибо!

С чувством понимания и не зря прожитого дня удаляюсь дальше тренироваться на кошках...

loggerserg · March 2, 2011

Вроде тоже не замечал. Примерчик не помешал бы.

Вот в моём (выше приведенном) примере и вывалилась в IE прокрутка...

Только как её победить - пока не владею ((

SelenIT · March 2, 2011

Ой, я забыл про обнуление margin и padding для body (просто сам всегда на автомате делаю). И border таблицы тоже может распирать (он на самом деле нужен, не только для отладки?).

PanSoul · March 3, 2011

Sorry, маленько не точно написал...

Но суть одна: скролл появиться, если вот это так и оставить

td.text {
	width: 70%;
	height: 100%;
}

Т.к. у колонки задана высота 100%!!!

Поставь высоту 80%, 85% или 89%, в общем поиграй с высотой- найди оптимальный для IE

Edited March 3, 2011 by PanSoul

loggerserg · March 3, 2011

Sorry, маленько не точно написал...
Но суть одна: скролл появиться, если вот это так и оставить
td.text {
	width: 70%;
	height: 100%;
}
Т.к. у колонки задана высота 100%!!!
Поставь высоту 80%, 85% или 89%, в общем поиграй с высотой- найди оптимальный для IE

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

Убрал height вовсе (т.е. вычисляется как auto) так всё стало кучеряво да же в IE, но только новых версий, а IE6 - не растянул td.text, а растянул td.top не смотря на то, что height: 160px.

Может этот вариант верстки далеко не самый удачный? Я его изучаю, что бы узнать табличную верстку. "Учитель" - вот он: Sozdai-Sam

Great Rash · March 3, 2011

Сказали бы для начала какой у вас доктайп...

psywalker · March 3, 2011

Может этот вариант верстки далеко не самый удачный? Я его изучаю, что бы узнать табличную верстку. "Учитель" - вот он: Sozdai-Sam

Ухты, а я помню, начинал вот с этого урока когда то

loggerserg · March 3, 2011

Сказали бы для начала какой у вас доктайп...

Я привел выше код полностью.

Но пожалуйста:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Пробую на строгом учиться...

Ухты, а я помню, начинал вот с этого урока когда то

Вот и я начинаю, только смущает, что у него самого страничка "не очень" выглядит. Да и html код примеров не доступен (приходится импровизировать).

Как считаешь, актуальность эти уроки не потеряли?

Edited March 3, 2011 by loggerserg

Sign In

Как работает height в CSS

Question

Link to comment

Share on other sites

21 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

Join the conversation

Обсуждения

Important Information