我想解决的问题是,这需要在自己的容器信封中,可以放入任何区域" hole"在我的网站上。例如,右侧的空白区域:
+------------------+------------+
| | 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;
}
非常感谢任何帮助!
答案 0 :(得分:2)
简单地将100vh的高度添加到容器中。
.Container {
height:100%;
min-height:100%;
overflow: hidden;
display: flex;
flex-direction: column;
height:100vh;
}
&#13;
答案 1 :(得分:1)
为html
&amp;添加高度和宽度body
也是,例如:
body, html{
height: 100vh;
width: 100vw;
}
这是你添加上述部分的第二个小提琴:
答案 2 :(得分:1)
在height: calc(100vh - 130px);
.Content