* { margin: 0; padding: 0; }
html { height: 100%; }
body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; height: 100%; }
#wrapper { width: 100%; min-width: 1000px; min-height: 100%; height: auto !important; height: 100%; background: pink; }
#header { height: 150px; background: yellow; }
#middle { width: 100%; padding: 0 0 100px; height: 1%; position: relative; }
#middle:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; }
#container { width: 100%; float: left; overflow: hidden; }
#content { padding: 0 270px 0 270px; }
#sideLeft { float: left; width: 250px; margin-left: -100%; position: relative; background: red; }
#sideRight { float: left; margin-right: -3px; width: 250px; margin-left: -250px; position: relative; background: green; }
#footer { margin: -100px auto 0; min-width: 1000px; height: 100px; background: blue; position: relative; }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" />
<!–[if lte IE 6]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" /><![endif]–>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="middle">
<div id="container">
<div id="content">content</div>
</div>
<div class="sidebar" id="sideLeft">left</div>
<div class="sidebar" id="sideRight">right</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>1. а как левый и правый дивы растянуть на всю высоту и возможно ли это вообще?
2. а как внутри дивов затем элементы растягивать на всю высоту и возможно ли это вообще?
