outer: высота / ширина - 100%

paska · January 13, 2011

Всем здрасте. Такая задача:

#outer - на весь экран в независимости от разрешения (фон картинка);
#content - оцентровать по середине;
содержимое #content - абсолютно споцизионированные блоки;
IE7+

Растянуть #outer мне удалось. Нашел в Гагле вот такие инструции:

body, html {height: 100%}
#outer {
		width: 100%;
		min-height: 100%;
		height: auto !important;
		height: 100%;
}

Но немгу понять как растянуть вложеннный в #outer блок (#content) по высоте. height: 100% на него не влияет. Так же его мне необходимо оцентровать. Подскажите плз. Пример можно посмотреть здесь

Scrum · January 13, 2011

не проверял, но должно быть так.

	* {margin: 0;padding:0;}
	html {overflow: auto}
	body, html {height: 100%;}
	#outer {
		min-height: 100%;
		height: 100%;
		background: #ccc;
	}
	#content {
		position: relative;
				height: 100%;
		background: #5fcd5f;
		min-width: 800px;
		width: 900px;
				margin: 0 auto;
	}
	#content #b1,#content #b2 {
		width: 100%;
		height: 250px;
		position: absolute;
		left: 0;
		background: #cdcd5f;
	}
	#content #b1 {
		top: 20px;
	}
	#content #b2 {
		top: 370px;
	}

psywalker · January 13, 2011

1)

body, html {height: 100%}
#outer {
		min-height: 100%;
position: relative;
}

2) Какие размеры у блока (#content)

Я смотрю он абсолют, значит так

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centr</title>
	<style type="text/css">
		*{ margin: 0; padding: 0;}
			div.wrap { 
				width: 510px; 
				height: 306px; 
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -153px;
				margin-left: -255px;

				border: 1px solid #000;

			}
				div.center { 
					width: 100px;
					height: 100%;
					position: absolute;
					left: 205px;
					top: 0;

				}
					span { 
						display: block; 
						width: 98px;
						height: 99px; 
						border: 1px solid #808080;
					}
						span.right { position: absolute; right: 0; top: 105px;}
						span.left { position: absolute; left: 0; top: 105px;}
	</style>
</head>

<body>
	<div class="wrap">
		<div class="center">
			<span class="top"></span>

			<span class="cent"></span>
			<span class="bottom"></span>
		</div>
		<span class="right"></span>
		<span class="left"></span>
	</div>
</body>
</html>

paska · January 13, 2011

не проверял, но должно быть так.

	* {margin: 0;padding:0;}
	html {overflow: auto}
	body, html {height: 100%;}
	#outer {
		min-height: 100%;
		height: 100%;
		background: #ccc;
	}
	#content {
		position: relative;
				height: 100%;
		background: #5fcd5f;
		min-width: 800px;
		width: 900px;
				margin: 0 auto;
	}
	#content #b1,#content #b2 {
		width: 100%;
		height: 250px;
		position: absolute;
		left: 0;
		background: #cdcd5f;
	}
	#content #b1 {
		top: 20px;
	}
	#content #b2 {
		top: 370px;
	}

Дружище СПС. подмогло. я то так пробовал, все упиралось строку: height: auto !important; у блока #outer - не давала растянуть #content по высоте. Сколько раз себе говорил: "берешь чужой код - проверяй каждую строку"

1)

body, html {height: 100%}
#outer {
		min-height: 100%;
position: relative;
}

2) Какие размеры у блока (#content)

Я смотрю он абсолют, значит так

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centr</title>
	<style type="text/css">
		*{ margin: 0; padding: 0;}
			div.wrap { 
				width: 510px; 
				height: 306px; 
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -153px;
				margin-left: -255px;

				border: 1px solid #000;

			}
				div.center { 
					width: 100px;
					height: 100%;
					position: absolute;
					left: 205px;
					top: 0;

				}
					span { 
						display: block; 
						width: 98px;
						height: 99px; 
						border: 1px solid #808080;
					}
						span.right { position: absolute; right: 0; top: 105px;}
						span.left { position: absolute; left: 0; top: 105px;}
	</style>
</head>

<body>
	<div class="wrap">
		<div class="center">
			<span class="top"></span>

			<span class="cent"></span>
			<span class="bottom"></span>
		</div>
		<span class="right"></span>
		<span class="left"></span>
	</div>
</body>
</html>

да, хотел с дуру тянтуь абсолютом, т.к. вариант что вверху не прокатывал.

psywalker · January 13, 2011

Ну тогда отлично, читай больше

Sign In

outer: высота / ширина - 100%

Question

paska

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Scrum

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

paska

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information