Applying HTML/Body CSS to DIV containers

Question

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!

score 2 · Answer 1 · answered Aug 23 '17 at 13:56

2

Simple add height on 100vh to the container.

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

answered Aug 23 '17 at 13:56

Figar Ali

826
1
9
17

score 1 · Answer 2 · answered Aug 23 '17 at 13:50

1

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/

answered Aug 23 '17 at 13:50

rebecca

943
9
12

score 1 · Answer 3 · answered Aug 23 '17 at 13:58

1

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

answered Aug 23 '17 at 13:58

Moaz Mabrok

697
10
32

Applying HTML/Body CSS to DIV containers

3 Answers3