Jak sprawić, by div rozciągał swoją wysokość między dwoma innymi divami i wyśrodkowywał jego zawartość

Question

Aug 14, 2012, 10:58 PM

Jak sprawić, by div rozciągał swoją wysokość między dwoma innymi divami i wyśrodkowywał jego zawartość

Chcę utworzyć jeden układ kolumnowy z 3 sekcjami

Sekcja 1: Nagłówek Sekcja 2: Sekcja Treści, która rozciąga się od nagłówka do początku stopki, której treść jest wyśrodkowana w pionie i poziomie wewnątrz itsel. Część 3: Stopka, która zawsze znajduje się na dole okna przeglądarki.

Problem:

Nie mogę uzyskać podziału treści na początek stopki / dołu div. Jeśli wprowadzę wysokość: 100%, automatycznie rozciąga się do końca całej strony.

Chciałbym także wyśrodkować zawartość wewnątrz środkowej działki w pionie i poziomie - choć jeszcze nie próbowałem tego zrobić.

Nie rozumiem też, dlaczego tło tekstu nagłówka nie jest kolorowe. nawet jeśli divy podpozycji są hermetyzowane przez nagłówek div, który ma zdefiniowany kolor tła.

dzięki!

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>