Здравствуйте.
Вопрос:
Каким образом можно растянуть блок
middle на всю оставшуюся высоту между блоками
header и
empty?
Такой код:
HTML:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>modern-art</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<a href="index.html"><img src="image/Logo.png" width="603" height="114" /></a>
</div> <!--logo-->
</div> <!--header-->
<div id="middle">
<div id="navi">
Навигация
</div><!--navi-->
<div id="content">
<p>Это контент</p>
</div><!--content-->
<div id="righter">
Лента
</div> <!--righter-->
</div><!--middle-->
<div id="empty"></div><!--пустой блок для footer-->
</div><!--wrapper-->
<div id="footer">
Это низ
</div><!--footer-->
</body>
</html>
CSS:
Код:
* {
margin: 0;
padding: 0;
}
html,body{
height:100%;
background: #10001d url(image/bg_image2.png) no-repeat top;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
}
/*wrapper---------------------------------------------------------------------------------------------------------------*/
#wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -116px auto;
border: 3px #FF00FF solid;
width:1000px;
}
/*header---------------------------------------------------------------------------------------------------------------*/
#header{
overflow: hidden;
background:url(image/bg_header.png);
width:950px;
height:165px;
margin:0 auto 20px auto;
box-shadow:0 0 15px 5px #000000;
-webkit-box-shadow: 0 0 15px 5px #000;
-moz-box-shadow: 0 0 15px 5px #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border:#999999 solid 1px;
border-top:none;
}
#logo{
background-repeat:no-repeat;
margin: 25px 0 0 175px;
}
#logo img{
text-decoration:none;
border: none;
}
/*middle-------------------------------------------------------------------------------------------------------------------*/
#middle{
overflow:hidden;
width: 1000px;
margin:0 auto;
background:url(image/bg_middle.png);
box-shadow:0 0 15px 5px #000000;
-webkit-box-shadow: 0 0 15px 5px #000;
-moz-box-shadow: 0 0 15px 5px #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border:#999999 solid 1px;
}
#navi{
width:100%;
height: 240px;
border:#FFFF00 2px solid;
}
#content{
width:780px;
border: 2px #00FF00 solid;
float: left;
}
#righter{
width: 210px;
background: url(image/bg_righter.png);
height:100px;
float:right;
border:2px #FF0000 solid;
}
/*empty---------------------------------------------------------------------------------------------------------------------*/
#empty{
height:100px;
}
/*footer---------------------------------------------------------------------------------------------------------------------*/
#footer{
clear:both;
width: 1000px;
height:100px;
margin: 10px auto 0 auto;
border:solid #FFF 2px;
}
Вопрос:
Каким образом можно растянуть блок
middle на всю оставшуюся высоту между блоками
header и
empty?
01.04.2012, 10:55
Как растянуть div на оставшуюся высоту родительского div'a?
Похожие темы
