How to Create Div to Fill All Space Between Header and Footer Div

How to create div to fill all space between header and footer div

Flexbox solution

Using flex layout we can achieve this while allowing for natural height header and footer. Both the header and footer will stick to the top and bottom of the viewport respectively (much like a native mobile app) and the main content area will fill the remaining space, while any vertical overflow will be scrollable within that area.

See JS Fiddle

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Make a Div Fill the Area Between a Header and Footer

The 'modern' way is to use flexbox

DEMO

.wrapper { 
  min-height: 100%;
  position: relative;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
}


.content { 
  flex:1;
  background:pink;
}

Edit: DEMO USING TABLE

Content with 100% between header and footer

Depending on how your page is set up, it may work if you set height: 100%; for (B) and position: absolute; for the container element. Here is an example:

HTML:

<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

CSS:

#container {
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;
}
#header, #footer {
    height: 100px;
    width: 100%;
    background: red;
}
#body {
    height: 100%;
    width: 100%;
    background: blue;
}

jsFiddle

add a div between header and footer that takes up rest of the view height

Taking a look at your Fiddle, there are many improvements you can make to your markup & CSS, but coming to your issue first, the reason why its not sliding down as expected is this :

position: absolute

you added this to your main div which should go in between .projects-wrapper. First thing I would say is make this a flex as well instead of block element.

Secondly, add a wrapper to your entire project body & Make that flex. like so

<div class="wrapper"> //this should be flex
  <header>..</header> //this "could" be flex depending on its contents
  <div class="projects-wrapper"></div>
  <footer>...</footer> //this "could" be flex depending on its contents
</div>

let me know if you are facing any other problems

How to make 100% div height between header and footer?

You DO need to change BODY to height:100%;

working demo

css

* { margin: 0; padding: 0 }
html { height: 100%; }
body {
    position: relative; height: 100%;
}
#top {
    height: 50px;
    background-color: red;
}
#anchored-footer {
    bottom: 0;
    height: 50px;
    background-color: blue;
    width: 100%;
}
#content {
    border: 5px solid green; /* because I need this border to go all around the content area */
    background-color: yellow;
    min-height:calc(100% - 110px);
}

*Notice: No position:absolute is used at all.. you don't need it, especially if you want your content to push your footer down.. then definitely don't use absolute.

how to make DIV height 100% between header and footer

I created an example in jsfiddle:

UPDATED JsFiddle: http://jsfiddle.net/5V288/1025/

HTML:

<body>
    <div id="header"></div>
    <div id="content"><div>
        Content 
    </div></div>
    <div id="footer"></div>
</body>

CSS:

html { height: 100%; }
body {
    height:100%;
    min-height: 100%;
    background: #000000;
    color: #FFFFFF;
    position:relative;
}
#header {
    height:50px;
    width:100%;
    top:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#footer {
    height:50px;
    width:100%;
    bottom:0px;
    left:0px;
    background: #CCCCCC;
    position:fixed;
}
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    padding: 0 20px;
}
#content > div {
    padding: 70px 0;
}

Without border-box the content will be height 100% + 140px padding. With the border-box the content height will be 100% and the padding will be inside.

Style the content (body) element to cover entire space between a header and a footer

Here is a solution using only css:

.container-fluid {
  height: 100vh;
  overflow-x: hidden;
}

.col-12 {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.header {
  position: sticky;
  top: 0;
  background: lightblue;
}

.body {
  flex: 1 1 auto;
}

.footer {
  position: sticky;
  bottom: 0;
  background: lightblue;
}

<main class="container-fluid p-0">
  <main class="row h-100">

    <section class="col-12">

      <div class="header bg-info w-100">
        <h1>Welcome to FMail (flexbox)</h1>
      </div>

      <div class="body bg-dark text-white p-0 w-100">
        <h5>The main email box (should always occupy all space between header and footer)</h5>
        <ul>
          <li>Email 1</li>
          <li>Email 2</li>
          <li>Email 3</li>
          <li>Email 4</li>
          <li>Email 5</li>
          <li>Email 6</li>
          <li>Email 7</li>
          <li>Email 8</li>
          <li>Email 9</li>
          <li>Email 10</li>

          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>
          <li>Email ...</li>

      </div>

      <div class="footer bg-info w-100">
        <h5>I am the footer (should be fixed at bottom)</h5>
      </div>

    </section>

  </main>
</main>

How to Create Div to Fill All Space Between Header and Footer Div