将HTML/Body CSS应用于DIV容器

我想解决的问题是，它需要放在自己的容器封套中，可以放在我站点上的任何区域“洞”中。例如，右侧的空白区域：

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

或左侧的空白区域：

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

或空模态区域：

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

这个想法是有一个“一个模板适合所有人”的概念，我可以重用它，它不依赖于HTML或正文维度。如果你看下面的第二部分，我试图制作一个模仿HTML/Body CSS的容器信封，但看起来不正确

---

我正在尝试制作一个模板，我可以把它放在我平台的任何地方，让它看起来和功能都一样：锁定的页眉，锁定的页脚，滚动内容。我有95%在那里，但不知道最后一部分。在这个提琴中，我让模板按需要运行，但最外层的CSS应用于HTML和主体。我需要将外部CSS应用于容器DIV。

HTML:

不管我如何运用它，它看起来总是不对的。下面是我纠正它的尝试：

HTML:

---

任何帮助都将不胜感激

在

html

和

正文中添加高度和宽度，例如：

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

这是你的第二把小提琴，上面加了一部分：

在
html
和
正文中也添加高度和宽度，例如：

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

这是你的第二把小提琴，上面加了一部分：

简单地在容器上添加100vh的高度


.Container{
身高：100%；
最小高度：100%；
溢出：隐藏；
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
简单地在容器上添加100vh的高度


.Container{
身高：100%；
最小高度：100%；
溢出：隐藏；
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
使用
高度：计算（100vh-130px）在
.Content
上使用
高度：calc（100vh-130px）打开
。内容

<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>

.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;
}

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