Cómo hacer que un div extienda su altura entre otros dos divs y centre su contenido

Question

Aug 14, 2012, 10:58 PM

Cómo hacer que un div extienda su altura entre otros dos divs y centre su contenido

Quiero hacer un diseño de una columna con 3 secciones

Sección 1: Encabezado Sección 2: Una sección de contenido que se extiende desde el encabezado hasta el comienzo del pie de página, que tiene su contenido centrado vertical y horizontalmente dentro de su Sección 3: Pie de página que siempre se encuentra en la parte inferior de la ventana del navegador.

El problema:

No puedo hacer que el contenido div se extienda hasta el principio del pie de página / inferior div. Si ingreso altura: 100% se estira automáticamente hasta el final de toda la página.

También me gustaría centrar el contenido dentro de esta división central vertical y horizontalmente, aunque todavía no he intentado hacerlo.

Tampoco entiendo por qué el fondo del texto del encabezado no está en color. incluso aunque las divs del subencabezado están encapsuladas por el encabezado div que tiene definido el color de fondo.

¡Gracias!

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.&nbsp;&nbsp;&#124;&nbsp;
            <span="address">Website Information</span> &mdash; <a href="mailto:[email protected]">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


        </span>
</div>


<div class="bottom-right">
    <span class="openinghours">Open by Appointment</span><span class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sponsored by XYZ</span>
</div>
</div>

</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

</body>
</html>