I want to make a one Column Layout with 3 section

Section 1: Header Section 2: A Content Section that stretchs from beneth the header to the beginning of the footer, which has it's content centered vertically and horizontally within itsel Section 3: Footer that always resides at the bottom of the browser window.

The Problem:

I can't get the content div to strech to the beginning of the footer/bottom div. If I enter height:100% it automatically stretches till the end of the whole page.

Also would like to center the content inside this middle div vertically and horizontally - though I have not yet attempted to do so.

Also don't understand why the background of the header text is not in color. even though the subheader divs are encapsulated by the header div which has background-color defined.

thanks!

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:info@info.eu">info@info.com</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>

2018 update

use flexbox or css grid. Here is a flexbox example. Css grid could be even simpler, but support is pretty low still:

body, html { padding: 0; margin: 0; }
header { background: #faa; }
article { background: #afa; }
footer { background: #aaf; }

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

article {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="page">
  <header>header content</header>
  <article>main content</article>
  <footer>footer content</footer>
</div>

No need to use tables! Some simple css will do nicely.

DEMO: http://jsbin.com/azivip/2/edit

Html Markup:

<body>
  <div id="content">
    <div id="header">
      This is the header
    </div>
    <div id="inner">
      This is the body
     </div>
    <div id="footer">
      this is the footer
    </div>
  </div>
</body>

CSS:

body{
  height:100%;
  padding:0px;
  margin:0px;
}
    #content{
      position:relative;
      bottom:0px;
      width:100%;
      height:100%;
    }
        #header{
          position:relative;
          bottom:0px;
          width:100%;
          height:100px;    /* Edit for height of header*/
          background:#f00;
        }
        #inner{
          width:100%;
          text-align:center;
          position: absolute; 
          top: 50%;
          display: table-cell; 
          vertical-align: middle;
        }
        #footer{
          position:absolute;
          bottom:0px;
          width:100%;
          height:100px;   /* Edit for height of footer */
          background:#0f0;
        }

In order for #inner to stay centered vertically even with multi-line content, you'll need to use Javascript/jQuery. Below is an example script that "pulls up" #inner just the right amount to be centered.

var mrgntop = -Math.floor($("#inner").height() / 2);
$("#inner").css({"margin-top":mrgntop});

<table> is what you need to use in this case. The HTML will look like this, basically:

<table class = "wrapper">
    <tr><td class = "header">I'm the header.</td></tr>
    <tr><td valign = "middle" class = "content">Some content. Some content. More content. More content. Content is great. Content is a great thing to talk about when trying to insert random content to elaborate behavior. Content.</td></tr>
    <tr><td class = "footer">I'm the footer.</td></tr>
</table>

Example CSS:

html, body, .wrapper {
   height: 100%;   
}
.header {
    height: 100px; /*This value can be anything*/
}
.content {
    text-align: center;
}
.footer {
    height: 100px;
}

Demo: jsFiddle. Note how the content is centered both vertically and horizontally.

Hope that helped!

来源：https://stackoverflow.com/questions/11960636/how-to-make-a-div-stretch-its-height-between-two-other-divs-and-center-its-conte

标签

css

html

height

How to make a div stretch its height between two other divs and center its content

2018 update