1
我想解決的問題是，這需要位於其自己的容器信封中，可以放入我網站上的任何區域「洞」。例如，在右邊空白區域：將HTML/Body CSS應用於DIV容器
+------------------+------------+
| | 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;
}
任何幫助將不勝感激！