1Dreamweaver1
Профессор
- Регистрация
- 4 Янв 2008
- Сообщения
- 417
- Реакции
- 45
- Автор темы
- #1
Подскажите как сделать левую колонку <sidebar> по высоте в 100%. В левой колонке (sidebar) вверху будет расположена форма(login form), а в самом низу картинка, как background. В зависимости от количества контента (middle), кортинка в левой колонке должна тяуться к низу до (footer).
Код:
<style type="text/css" media="screen">
* { padding: 0; margin: 0; }
html, body {height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height:100%;
}
input, select { margin: 0; padding: 0;}
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr { margin: 0; padding: 0; border: 0; border-collapse: separate; border-spacing: 0;}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 902px;
padding: 10px;
height: 100px;
margin: 10px 0px 5px 0px;
background: #ABBEBE;
}
#sidebar {
color: #333;
margin: 10px;
padding: 0px;
width: 195px;
float: left;
background:#ccc;
height:90%;
position:absolute;
background:url(../images/image.jpg) left bottom no-repeat;
}
#middle {
float: right;
color: #333;
margin: 10px;
padding: 0px;
width: 683px;
display: inline;
position: relative;
}
#footer {
width: 902px;
clear: both;
color: #333;
background: #ABBEBE;
margin: 0px 0px 10px 0px;
padding: 10px;
}
.clear { clear: both; background: none; }
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
Header
</div>
<!-- End Header -->
<!-- Begin Left Column -->
<div id="sidebar">
Login form
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="middle">Content.
Text text text text text text text text text text text
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</p>
<div class="clear"></div>
</div>
<!-- End Right Column -->
<div class="clear"></div>
<!-- Begin Footer -->
<div id="footer">
This is the Footer
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>