Applying HTML/Body CSS to DIV containers

This question already has an answer here:

  • Height percentage not working in CSS

    4 answers
  • Percentage Height HTML 5/CSS

    4 answers

The problem that I want to fix is that this needs to be in its own container envelope that can be put into any region “hole” on my site. For example, empty region on the right:

+------------------+------------+
|                  |  header    |
|                  +------------+
|                  |            |
|                  |  content   |
|                  |            |
|                  +------------|
|                  |  footer    |
+------------------+------------+

Or empty region on the left:

+------------+------------------+
|  header    |                  |
+------------+                  |
|            |                  |
|  content   |                  |
|            |                  |
+------------|                  |
|  footer    |                  |
+------------+------------------|

Or an empty modal region:

+-------------------------------+
|                               |
|       +---------------+       |
|       |    header     |       |
|       +---------------+       |
|       |    content    |       |
|       +---------------+       |
|       |    footer     |       |
|       +---------------+       |
|                               |
+-------------------------------+

The idea is to have a “one template fits all” concept that I can reuse which is not dependent on the HTML or Body dimensions. If you look at the second fiddle below, I attempted to make a container envelope that mimicked the HTML/Body CSS, but doesn’t look correct.


I am attempting to make a template that I can place anywhere within my platform and have it look and function the same: Locked Header, Locked Footer, Scrolling Content. I am 95% there, but cant figure out the last part. In this fiddle, I have the template functioning as desired, but the outermost CSS is being applied to HTML and Body. I need that outer CSS to be applied to a container DIV.
https://jsfiddle.net/SmittyXyvid/pg9ogay7/5/

HTML:

<div class="Header">
  Header
</div>

<div class="Content">
  <div class="CloseButton"><i class="fa fa-times-circle fa-3x fa-pull-right"></i></div>
  <p>Test</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>This is a large amount of scrollable content.</p>
  <p>Test</p>
</div>

<div class="Footer">
    <span><h3>Footer</h3>Descriptive Text</span>
</div>

CSS:

html, body {
  height:100%;
  min-height:100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.Header {
  flex: 0 0 auto;
  border-bottom: 1px solid #7f7f7f;
  height: 30px;
}

.Content {
  flex: 1 1 auto;
  overflow-y: scroll;
  background-color: black;
  color: white;
}

.CloseButton {
  padding: 5px;
  color: #7f7f7f;
}

.Footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #7f7f7f;
  height: 100px;
  text-align: center;
  padding-bottom: 15px;
}

No matter how I apply it, it never looks right. Here is my attempt at correcting it:
https://jsfiddle.net/SmittyXyvid/pg9ogay7/6/

HTML:

<div class="Container">

  <div class="Header">
    Header
  </div>

  <div class="Content">
    <div class="CloseButton"><i class="fa fa-times-circle fa-3x fa-pull-right"></i></div>
    <p>Test</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>This is a large amount of scrollable content.</p>
    <p>Test</p>
  </div>

  <div class="Footer">
      <span><h3>Footer</h3>Descriptive Text</span>
  </div>

</div>

CSS:

.Container {
  height:100%;
  min-height:100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.Header {
  flex: 0 0 auto;
  border-bottom: 1px solid #7f7f7f;
  height: 30px;
}

.Content {
  flex: 1 1 auto;
  overflow-y: scroll;
  background-color: black;
  color: white;
}

.CloseButton {
  padding: 5px;
  color: #7f7f7f;
}

.Footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #7f7f7f;
  height: 100px;
  text-align: center;
  padding-bottom: 15px;
}

Any help would be greatly appreciated!



add a height and width to your html & body too, eg:

body, html{
  height: 100vh;
  width: 100vw;
}

here’s your second fiddle with the above part added to it:

https://jsfiddle.net/pg9ogay7/7/

Simple add height on 100vh to the container.

use height: calc(100vh – 130px); on .Content