Height:100% не срабатывает

niorix · October 29, 2012

Добрый день, товарищи. Помогите доверстать...

есть пимерно такая страничка


<!DOCTYPE html>
<html>
	<head>
	  <link rel="stylesheet" type="text/css" href="test.css">
	</head>

 <body>

	<div id="content">
		<header>
		<div id="logo">
		</div>

		<div id="account">
		</div>
		<ul id="top_nav">
			<li>menu</li>
			<li>menu</li>
			<li>menu</li>
		</ul>
		<ul id="nav">
			<li>menu</li>
			<li>menu </li>
			<li>menu </li>
			<li>menu </li>
		</ul>
	</header>

	<nav></nav>

	<aside></aside>
	<div id="text">
		<div>
		<pre>

		</pre>
		</div>
	</div>
	</div>
	<footer>
	<div id="c">

	<div id="hr">

	</div>
	</div>

	<span>Footer</span>
	</footer>
</body>
</html>


* {
margin: 0;
padding: 0;}
* html #content {
  height: 100%;
}
html, body{
		height:100%;
		width:100%;}
header {
	display: block;
	border: 1px solid #333D3D;
	background: url("img/header.png");
	margin: 0 auto;
	color: #ffffff;
	height:100px;
	position: relative;
	}
header #nav {
	display:block;
	position:relative;
	margin:0 0 0 20px;
	padding: 0;
	top: 60px;
	float:left;
	}
#top_nav li, #nav li{
	padding-right:20px;
	margin:0;
	display:inline;
	float:left;
	}
header #top_nav {
	display:block;
	position:relative;
	float:right;
	padding:0px;
	margin:0px;
	top:10px;
	}
header #logo {
	background:#343e3e;
	border: 1px solid #000;
	float:left;
	position:relative;
	width:258px;
	height:128px;
	margin-left:20px;
	margin-top:20px;
	}
header #account{
	background:#343e3e;
	border: 1px solid #000;
	float:right;
	position:relative;
	width:258px;
	height:128px;
	margin-right:20px;
	margin-top:20px;
	}
nav, aside{
	margin-top:20px;
	width:258px;
	height:100px;
	background:#202627;
	border: 1px solid #333D3D;
}
nav{
	float:left;
	clear:left;
	margin-left:20px;
	}
aside{
	float:right;
	margin-right:20px;
	}
#content, footer{
	background:#41444c;}
#content{
	min-height: 100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	margin:0 auto;
	}
#text{
	padding-bottom: 72px;
	/*overflow:hidden;*/
	margin:0 300px;
	margin-top:20px;
	}
#text div:first-child{
	background:#000;
	height:100%;
	margin-bottom:20px;

	}
footer{
	height:52px;
	margin-top:-52px;
}
#c{
		margin-left:40px;
	margin-right:40px;}
#hr{
	width:100%;
	height:2px;
	overflow:hidden;
	background:#000;
	}

Подскажите как сделать так что бы #text был растянут во всю доступную ширину?

Radiocity · October 29, 2012

В каких браузерах не срабатывает? Какой элемент нужно сделать 100% высоты?

mrnobody · October 29, 2012

Специфичность селектора * html #content больше чем #content, следовательно, высота становится не min-height: 100%, а height: 100%;

Edited October 29, 2012 by mrnobody

niorix · October 29, 2012

Firefox и Chrome для начала. 100% должно быть у <div id="text">, точнее даже не 100%, а 100% - header - footer. Как сделать не могу сообразить.

niorix · October 29, 2012

Специфичность селектора * html #content больше чем #content, следовательно, высота становится не min-height: 100%, а height: 100%;

Не совсем понимаю о чем Вы. #content на 100% растягивается нормально, а вот лежаший в нем div#text растягиваться не хочет... Я вот о чем говорю.

В конце концов нужно получить такой вот макет.

Sign In

Height:100% не срабатывает

Question

niorix

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Radiocity

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

niorix

Link to comment

Share on other sites

niorix

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information