Ребят, либо я очень туплю, либо это нельзя сделать? Помогите, пожалуйста.
Есть хидер и футер (абсолютно позиционированный и прижатый к низу страницы). Так же есть боковое меню, которое должно растягиваться на всю допустимую высоту. Как это сделать?
<div class="container">
<div class="header">
<div class="logo"></div>
</div>
<div class="rBlock">
<div class="lBlock">
пункт <br />
пункт <br />
пункт <br />
пункт <br />
пункт <br />
пункт <br />
пункт <br />
пункт <br />
пункт <br />
пункт <br />
пункт <br />
пункт <br />
пункт <br />
пункт <br />
пунктend
</div>
<ul>
<li>111111</li>
<li>222222</li>
<li>3333</li>
<li>4444444444</li>
<li>5555555</li>
<li>ABCD</li>
</ul>
</div>
<div class="footer-helper"></div>
<div class="footer">
<span class="left">LEFT</span>
<span class="right">RIGHT</span>
</div>
</div>
-
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
}
ul {
//display: inline;
display: inline-block;
font-size: 12px;
list-style: none;
margin-top: 10px;
zoom: 1;
}
li {
background: #000;
color: #fff;
display: inline;
float: left;
height: 22px;
margin-right: 2px;
overflow: hidden;
text-align: center;
}
.container {
min-height: 100%;
position: relative;
}
.header {
background: #d1d4d9;
border: 1px solid #000;
box-shadow: 0px 0px 10px #a9a9a9;
height: 108px;
z-index: 5;
}
.logo {
background: #000;
float: right;
height: 91px;
margin: 5px 5px 5px 0px;
width: 206px;
}
.footer {
background: #9e2627;
border-top: 3px solid #000;
bottom: 0px;
height: 30px;
position: absolute;
width: 100%;
}
.footer-helper {
height: 30px;
width: 100%;
}
.lBlock {
background: #27919e;
box-shadow: 2px 0px 10px #cecdd2;
color: #fff;
float: left;
width: 200px;
z-index: -5;
}
.rBlock {
overflow: hidden;
text-align: center;
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}