Не растягивается height:100% блоки до футера

Bingo · February 17, 2012

Здравствуйте, вот собственно и проблема, не понимаю в чем дело,

HTML

<!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></title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">

	<div id="header">
		<img src="images/logo.png" class="logo">

	</div><!-- #header-->


 <div style="clear:both; height:20px;"></div>


	<div id="middle">

		<div id="container">
			<div id="content">
				<div class="main">
				<h1>Заголовок</h1>
	ТекстТекстТекстТекстТекстТекст

				</div>
			</div><!-- #content-->
		</div><!-- #container-->

		<div class="sidebar" id="sideRight">
			<img src="images/banner1.png"><br><br>
<img src="images/banner1.png"><br><br>
<img src="images/banner1.png"><br>
			</div><!-- .sidebar#sideRight -->

	</div><!-- #middle-->

</div><!-- #wrapper -->

<div id="footer">

</div><!-- #footer -->

</body>
</html>

CSS


* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	width: 100%;
	height: 100%;
	background:#444444;
	color:#fff;
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {
	margin: 0 0 18px
}
h1,h2,h3 {
margin-bottom:10px;
}
img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
	width: 960px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;

}


/* Header
—————————————————————————--*/
#header {
	height: 140px;

}
.logo {
margin-top:10px;
}

/* Middle
—————————————————————————--*/
#middle {
	width: 100%;
	padding: 0 0 100px;
	height: 1%;
	position: relative;
	min-height: 100%;

}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
	min-height: 100%;
	height: 1%;
	position: relative;
	min-height: 100%;

}
#content {
	padding: 0 270px 0 0;

}
.main {
border:1px solid #666666;
background:#4f4f4f;
padding:10px;
}
.menu  {
width:810px;
margin:0 auto;
}
.menu ul li{
list-style:none;
float:left;
width:100px;
height:36px;
background:url(images/menu.png) no-repeat;
padding-top:5px;
text-align:center;
margin-right:15px;
color:#444444;
font-weight:bold;
}
/* Sidebar Right
—————————————————————————--*/
#sideRight {
float: left;
margin-right: -3px;
width: 250px;
margin-left: -250px;
position: relative;
border:1px solid #666666;
background:#4f4f4f;
text-align:center;
padding:10px 0 0 0;
}


/* Footer
—————————————————————————--*/
#footer {
	width: 960px;
	margin: -50px auto 0;
	height: 50px;
border:1px solid black;
	position: relative;
}

Edited February 17, 2012 by alexriz

lexxcode · February 17, 2012

Так, с чего же им растягиваться, то?

Они растягиваются в меру заполнения их контентом. Зачем вам, чтобы они были на 100% ?

Bingo · February 17, 2012

эти блоки сделанные фоном и border'ом, поэтому и нужно чтобы они были растяну в низ..

Sign In

Не растягивается height:100% блоки до футера

Question

Bingo

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

lexxcode

Link to comment

Share on other sites

Bingo

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information