我正在使用 flexbox 构建布局;让页面级页眉和页脚留在原地相当容易,让页眉和页脚之间的区域显示列也很容易。
<div class="vbox fill" >
<header class="header">
</header>
<div class="hbox expand no-padding no-margin">
<div class="column1 vbox"></div>
<div class="column2 vbox"></div>
<div class="content vbox">
Content Here
</div>
<div class="column4 vbox"></div>
<div class="column5 vbox"></div>
</div>
<footer class="footer">
</footer>
</div>
CSS:
.vbox {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.hbox {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
.expand {
flex: 1 1 100%;
width: 100%;
height: 1%;
}
.fill {
height: 100vh;
}
现在我正在尝试显示内容,但内容中有一个“页脚”保留在原位:
当黄色内容填满屏幕的其余部分时,我设法在其中添加了一个红色页脚,但是当黄色 div 由于数据过多而扩展时,它会使用滚动条将红色 div 推出屏幕.
这是我到目前为止所做的(此 html 现在位于 Content Here
部分所在的位置)
CSS:
.row1 {
flex: 1 1 auto;
background-color: yellow;
}
.row2 {
flex: 0 0 50px;
background-color: red;
}
HTML:
<div class="row1" *contentItem>
TEST1
</div>
<div class="row2" *contentItem>
TEST2
</div>
黄色的div显然应该限制在一定的高度,但我应该设置多少呢? 100vh
不是一个选项,因为黄色和红色 div 由页眉和页脚限制,100vh
只是让黄色 div 与页面大小相同,而不考虑页面级页眉和页脚,它也会将红色条滚动到 View 之外。
关于如何在黄色 div 展开时防止红色 div 被推离屏幕的任何想法?
编辑:
这个 hack 似乎让它起作用,但不确定为什么 1% 的东西让它起作用:
.row1 {
flex: 1 1 auto;
overflow: auto;
height: 1%;
}
.row2 {
flex: 0 0 auto;
最佳答案
试图了解您,但不确定,所以想知道这是否是您要找的东西?
我所做的是将 2 个新元素 (row1
/row2
) 添加到您的初始 content
元素,尽管我称它们为 content-main
和 content-footer
。
然后我给 content-main
flex-grow: 1
所以它会填充 content-footer
占用空间后剩下的内容。
最后,为了避免 content-footer
被推开,我添加了一个内部元素,content-scroller
使用绝对定位。
内部 content-scroller
应该不是必需的,尽管除了 Chrome 之外的所有浏览器都不能简单地在 content-main 上设置
,因此要使其适用于所有人,需要额外的元素。overflow: auto
好的部分是,它不会在响应性等方面以任何负面方式影响解决方案。
堆栈片段
html, body {
margin: 0;
}
.vbox {
display: flex;
flex-direction: column;
}
.hbox {
display: flex;
flex-direction: row;
}
.expand {
flex-grow: 1;
width: 100%;
}
.expand .content {
flex-grow: 1;
}
.expand .content .content-main {
position: relative;
flex-grow: 1;
background: lime;
}
.expand .content .content-main .content-scroller {
position: absolute;
left: 0; top: 0;
height: 100%; width: 100%;
background: yellow;
overflow: auto;
}
.expand .content .content-footer {
background: red;
}
.fill {
height: 100vh;
}
<div class="vbox fill">
<header class="header">
Header
</header>
<div class="hbox expand no-padding no-margin">
<div class="column1 vbox"> Col 1 </div>
<div class="column2 vbox"> Col 2 </div>
<div class="content vbox">
<div class="content-main">
<div class="content-scroller">
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
Content Here<br>
</div>
</div>
<div class="content-footer">
Content Footer
</div>
</div>
<div class="column4 vbox"> Col 4 </div>
<div class="column5 vbox"> Col 5 </div>
</div>
<footer class="footer">
Footer
</footer>
</div>
关于html - 在已受页面级页眉和页脚限制的内容中添加固定页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44549497/