Как сделать div растянуть его высоту между двумя другими div и центрировать его содержимое
Я хочу сделать макет одной колонки с 3 разделами
Раздел 1: Заголовок Раздел 2: Раздел содержимого, который простирается от верхнего до верхнего колонтитула, причем его содержимое центрируется по вертикали и горизонтали внутри самого элемента. Раздел 3: Нижний колонтитул, который всегда находится внизу окна браузера.
Эта проблема:
Я не могу получить содержимое div, чтобы оно доходило до начала нижнего колонтитула. Если я введу высоту: 100%, она автоматически растянется до конца всей страницы.
Также хотел бы центрировать содержимое внутри этого среднего div вертикально и горизонтально - хотя я еще не пытался это сделать.
Также не понимаю, почему фон текста заголовка не цветной. даже если div подзаголовка инкапсулирован div заголовка, у которого определен цвет фона.
Спасибо!
http://jsbin.com/ixipug/1/edit
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
margin-bottom: 0px;
}
#containerHeaderContent {
min-height:100%;
height: auto;
height: 100%;
margin: 0 auto -1.5em;
}
.push {
height: 1em;
}
.header {
background-color: aqua;
padding-top:20px;
}
.subheader-left {
float:left;
font-family: serif;
font-size: 20px;
text-align: left;
}
.subheader-right{
float: right;
font-family: sans-serif;
font-size: 12px;
padding-right: 20px;}
.middleSection {
padding-top: 10px;
clear:both;
width:100%;
height auto;
background-color: #e8e7e7;
}
.bottom{
background-color: red;
position: absolut;
height: 1em;
font-size: small;
}
.bottom-left {
float: left;
font: sans-serif;
left: 20px;
}
.bottom-right {
float: right;
right: 15px;
font-style: italic;
color: #8e8e8e;
font-size: 11px;
}
</style>
<title>XYZ</title>
</head>
<body>
<div id="containerHeaderContent">
<div class="header">
<div class="subheader-left">XYZ</div>
<div class="subheader-right">LOREM</div>
</div>
<div class="middleSection">Content Vertical and Horizontally Centered inside DIV</div>
<div class="push"></div>
</div>
<div class="bottom">
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project by XZY. |
<span="address">Website Information</span> — <a href="mailto:[email protected]">[email protected]</a>
</span>
</div>
<div class="bottom-right">
<span class="openinghours">Open by Appointment</span><span class=""> sponsored by XYZ</span>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>