【发布时间】：2017-08-24 17:36:32
【问题描述】：
我要解决的问题是，它需要放在自己的容器信封中，可以放入我网站上的任何区域“洞”中。比如右边的空白区域：
+------------------+------------+
| | header |
| +------------+
| | |
| | content |
| | |
| +------------|
| | footer |
+------------------+------------+
或者左边的空白区域：
+------------+------------------+
| header | |
+------------+ |
| | |
| content | |
| | |
+------------| |
| footer | |
+------------+------------------|
或者一个空的模态区域：
+-------------------------------+
| |
| +---------------+ |
| | header | |
| +---------------+ |
| | content | |
| +---------------+ |
| | footer | |
| +---------------+ |
| |
+-------------------------------+
这个想法是有一个“一个模板适合所有”的概念，我可以重复使用它不依赖于 HTML 或 Body 尺寸。如果你看下面的第二个小提琴，我试图制作一个模仿 HTML/Body CSS 的容器信封，但看起来不正确。
我正在尝试制作一个模板，该模板可以放置在我的平台中的任何位置，并使其外观和功能相同：锁定页眉、锁定页脚、滚动内容。我在那里 95%，但无法弄清楚最后一部分。在这个小提琴中，我让模板按需要运行，但最外层的 CSS 被应用于 HTML 和 Body。我需要将外部 CSS 应用于容器 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;
}
无论我如何应用它，它看起来都不会正确。这是我纠正它的尝试： 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;
}
任何帮助将不胜感激！
【问题讨论】：