*Левая панель с фиксированной шириной, высота - на всю высоту страницы, между шапкой и футером.
*Средний блок без фиксированной ширины и высоты, резиновый.
*Правый блок фиксированный по высоте и ширине.
*Header имеет position:fixed;
*Footer должен быть прижат к низу экрана, а основной блок растянут на всю высоту.
Проблема с центральным блоком, если ему не задать ширину, то получается как-то так:
код:
/*CSS Base =================================*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li, form {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline;}
body {color:#111; font-family: "Tahoma", sans-serif;}
input, textarea {outline:none;}
h1 {font-size:36px; font-weight: normal;}
h2 {font-size:28px; font-weight: normal;}
p {font-size:18px; line-height:20px; }
a {outline:none; text-decoration:none;}
a:hover {text-decoration: none;}
img {border:none; outline:0;}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* HEADER */
header {
width: 100%;
height: 80px;
background: #ECECEC;
position: fixed;
top: 0;
right: 0;
z-index: 10;
}
/* MAIN CONTENT */
#container {
position: relative;
width: 100%;
height: 100%;
margin-top: 80px;
}
#container .left-panel {
width: 400px;
height: 100%;
background: #CACACA;
float: left;
}
#container .content {
width: 100%;
position: relative;
float: right;
}
#container .content .right-panel {
float: right;
width: 200px;
height: 400px;
background: #CACACA;
}
/* FOOTER */
footer {
height: 100px;
width: 100%;
background: #ECECEC;
}
<header>
<h1>HEADER</h1>
</header>
<section id="container" class="clearfix">
<div class="left-panel">
<h2>left-panel</h2>
</div>
<div class="content">
<div class="right-panel">
<h2>right-panel</h2>
</div>
<h2>main content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.</p>
</div>
</section>
<footer>
<h2>footer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore dolores enim pariatur amet velit magni numquam tempore ipsam, aut dolorum impedit laborum, corporis, explicabo placeat.</p>
</footer>
Еще попробовал вот так:
/* MAIN CONTENT */
#container {
width: 100%;
height: 100%;
margin-top: 80px;
min-width: 980px;
display: table;
}
#container .left-panel {
width: 400px;
height: 100%;
background: #CACACA;
display: table-cell;
}
#container .content {
display: table-cell;
}
#container .content .right-panel {
float: right;
width: 200px;
height: 200px;
background: #CACACA;
}
Почти то, что надо, но теперь главный #container не растягивается на всю высоту страницы.