Растянуть div на всю свободную высоту

Dark Smoke · October 7, 2012

Не могу растянуть DIV по высоте

не один способ не работает ((

Помогите!


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

            </div>
</div>


html, body {
    font-family: Arial, Helvetica, sans-serif;
    height:100%;
}

#wrapper {
    width: 1200px;
    margin: 0 auto;
}

#content {
    min-height:100%;
    height:100%;
    _height:100%;
}

USF · October 7, 2012

у каждого родителя должна быть указана высота.

у вас у wrapper'a её нет. значит они будет по контенту, а значит её дочерний блок будет такого же размера.

Dark Smoke · October 7, 2012

#wrapper {
    height: 100%;
    margin: 0 auto;
    width: 1200px;
}

Сделал. не чего не изменилось.

USF · October 7, 2012

значит неправильно делаете http://jsfiddle.net/usfe/T3SDT/

Dark Smoke · October 7, 2012

Ну что не правильно? Уже весь мозг поломал.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>v.:1.0</title>
		<meta http-equiv="Content-Language" content="ru" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="author" content="it-project.dp.ua" />
		<meta name="robots" content="index,follow" /> 
		<!-- <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /> -->
		<link rel="stylesheet" type="text/css" href="css/reset.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">

	</head>
	<body>
		<div id="wrapper">
			<div id="header">
				<div class="name">OTKOSY.IN.UA</div>
				<div class="tel1">+38 050 456 57 82</div>
				<div class="tel2">+38 050 466 77 35</div>
				<h1>ПРОФЕССИОНАЛЬНАЯ ОТДЕЛКА ОТКОСОВ<br />В ДНЕПРОПЕТРОВСКЕ</h1>
				<ul>
					<li>МОНТАЖ ПОАСТИКОВЫХ ОТКОСОВ</li>
					<li>ОБШИВКА БАЛКОНОВ ПЛАСТИКОВЫМИ ПАНЕЛЕМИ</li>
					<li>МОНТАЖ ПЛАСТИКОВЫХ ПАНЕЛЕЙ В ЛЮБЫХ ПОМЕЩЕНИЯХ</li>
				</ul>
			</div>
			<div id="menu">
				<ul>
					<li><a href="#">ГЛАВНАЯ</a></li>
					<li><a href="#">О КОМПАНИИ</a></li>
					<li><a href="#">ТЕХНОЛОГИИ</a></li>
					<li><a href="#">ЦЕНЫ</a></li>
					<li><a href="#">КОНТАКТЫ</a></li>
				</ul>
			</div>
			<div id="content">
				[*content*]
			</div>
			<div id="footer">
				<span>© 2012 - OTKOSY.IN.UA ОТДЕЛКА ОТКОСОВ В ДНЕПРОПЕТРОВСКЕ</span>
				<a href="http://it-project.dp.ua/" title="">СОЗДАНИЕ САЙТА IT-ПРОЕКТ</a>
			</div>
		</div>
	</body>
</html>


html, body {
	font-family: Arial, Helvetica, sans-serif;
	height:100%;
}

#wrapper {
	width: 1200px;
	margin: 0 auto;
	height:100%;
}

#header {
	background: url(../images/header.jpg) no-repeat;
	height: 304px;
}

#menu {
	height: 27px;
	background: url(../images/menu.jpg) no-repeat;
}

#footer {
	height: 72px;
	background: url(../images/footer.jpg) no-repeat;
}

.name {
	width: 250px;
	text-align: center;
	padding: 25px 0 0 0;
	font: 14px Arial serif;
	color: #939494;
	float: left;
}

.tel1, .tel2 {height: 40px; font: bold 20px Arial serif; color: #3b3b3b;}

.tel1 {
	float: left;
	padding: 19px 0 0 540px;
}

.tel2 {
	padding: 19px 0 0 1005px;
}

#header h1 {
	display: block;
	width:400px;
	text-align: right;
	font: 18px sans-serif;
	color: #2e2e2e;
	padding: 40px 0 0 182px;
}

#header ul {
	padding: 40px 0 0 0;
	width: 560px;
}

@-moz-document url-prefix() {
	#header ul {padding: 37px 0 0 0;}
}

#header li {
	text-align: right;
	color: #a1a1a1;
	font-size: 14px;
	line-height: 170%;	
}

#menu {
    padding: 14px 0 0 0;
}

#menu ul li a {
	color: #fff;
	text-decoration: none;
}

#menu ul li {
	display:block;
	float:left;
	width: 150px;
	text-align: center;
	font-size: 15px;
}

.active  a {color: #ff7272 !important}

#content {
	padding: 20px 43px;
}


#footer {
	height: 72px;
	background: url(../images/footer.jpg) no-repeat;
}

#footer span, #footer a {
	color: #a1a1a1;
	font: 10px Arial, Helvetica, sans-serif;
}

#footer span {
	display: block;
	padding: 25px 0 0px 45px;
}

#footer a {
	padding: 0 0 0 45px;
	text-decoration: none;
}

USF · October 7, 2012

#content {
padding: 20px 43px;
}

:facepalmxd:

Sign In

Растянуть div на всю свободную высоту

Question

Dark Smoke

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

USF

Link to comment

Share on other sites

Dark Smoke

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

Dark Smoke

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information