Высота блока 100% высоты родителя

trulave · January 13, 2012

Добрый день!

Нужен макет сайта, с высотой и шириной 100%. Хэдер и Футер(прижат к низу окна) с фиксированной высотой 100px, а Центр - остаток высоты документа (height: 100%). Центр "разбит на две колонки, так, что бы они имели высоту 100% от родителя, тоесть от Центра.

У меня в принципе получилось. Тоесть, в FF и Chrome отображается так, как мне и нужно (Высота сайта равна высоте окна, и не выезжает за ее пределы), а вот Opera почему то Центру применяет высоту 100% не от родителя, а от всего документа. (Как отобразиться в IE и других браузерах - не важно. Главное что бы на этих трех было правильно)

Почему так? И как исправить это безобразие?

Chrome сделал все правильно:

Firefox тоже:

Opera столкнул Футер ниже:

Вот сообственно код:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>temp</title>
	<link rel="stylesheet" href="html5.css">
	<!--[if lt IE 9]> 
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
	<![endif]-->
</head>
<body>

<div id="wrapper">
	<header>hed</header>
	<nav>test1 | test2 | test3</nav>
	<div id="main">
		<div style="display: table; width: 100%; height: 100%">
			<div id="sidebar">sidebar</div>
			<div id="content">content</div>
		</div>
	</div>
	<footer>fot</footer>
</div>

</body>
</html>

* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

/* ————————————-- */

#wrapper {
	width: 100%;
	height: 100%;
	display: table;
}
header {
	height: 100px;
	display: block;
	background-color: darkgreen;
}
footer {
	height: 100px;
	display: block;
	background-color: darkgreen;
}
nav {
	height: 40px;
	display: block;
	background-color: darkblue;
}

#main {
	height: 100%;
	display: table-row;
}


#sidebar {
	width: 250px;
	display: table-cell;
	background-color: darkred;
}
#content {
	display: table-cell;
	background-color: grey;
}

PS: Знаю, что тема давно изъезжена, но облазив кучу сайтов в том числе и этот, я так и не смог найти то, что мне нужно. Пожалуйста помогите...

Edited January 18, 2012 by trulave

trulave · January 17, 2012

Бу! куда все уважаемые эксперты подевались? Я решил проблему при помощи яваскрипта. Но нужно что нибудь изящнее... средствами html и css...

buddah · January 17, 2012

Не нужно код прятать Скрытым текстом, мы его не видим.

psywalker · January 17, 2012

Не нужно код прятать Скрытым текстом, мы его не видим.

А он наверное администраторам чисто вопрос задавал)

По сабжу: А почему бы не симулировать фон?

trulave · January 18, 2012

Думал скрытый текст это что то вроде спойлеров Исправил

По сабжу: А почему бы не симулировать фон?

Тоесть как?

Edited January 18, 2012 by trulave

psywalker · January 18, 2012

Думал скрытый текст это что то вроде спойлеров Исправил
По сабжу: А почему бы не симулировать фон?
Тоесть как?

Левой части полоску фона, пустить по вертикали, а странице основной фон - фон контента. Футер прижать, как обычно.

trulave · January 18, 2012

Так то можно да. Но в контенте будет две таблицы. и нужно что бы они были на всю высоту контента. Опять же. Хром и FF сделали все как надо... А вот опера снова вредничает. И 100% высоты не от родительского элемента, а от документа. Почему так?

Nanto · January 18, 2012

http://forum.htmlbook.ru/index.php?showtopic=30815&st=0

Sign In

Высота блока 100% высоты родителя

Question

trulave

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

trulave

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

trulave

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

trulave

Link to comment

Share on other sites

Nanto

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information