html - 仅使用 flexbox 固定页眉、可滚动内容和固定页脚布局
问题描述
我正在尝试使用 flex 创建一个 HEADER、可滚动的 CONTENT 和 FOOTER 结构:
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 400px;
background-color: white;
border: 1px solid black;
text-align: center;
border-collapse: collapse;
overflow-y: hidden;
}
.header {
justify-self: flex-start;
background-color: #cdcdcd;
padding: 8px;
}
.content {
border: 1px solid black;
padding: 8px;
overflow-y: scroll;
}
.footer {
justify-self: flex-end;
background-color: #cdcdcd;
padding: 8px;
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
</div>
<div class="footer">
Footer
</div>
</div>
我无法避免整个屏幕滚动,不仅是内容。我需要页眉和页脚保持固定在其位置(分别为顶部和底部)并仅滚动内容(仅内容上的垂直滚动条)。
解决方案
添加flex: 1 1 auto;
和height: 0px;
将使.content
滚动。
但是,由于 上有 a height: 100%;
,.container
会.content
缩小,使用 amin-height
来防止这种情况;
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 400px;
background-color: white;
border: 1px solid black;
text-align: center;
border-collapse: collapse;
overflow-y: hidden;
}
.header {
justify-self: flex-start;
background-color: #cdcdcd;
padding: 8px;
}
.content {
flex: 1 1 auto;
height: 0px;
min-height: 300px;
border: 1px solid black;
padding: 8px;
overflow-y: scroll;
}
.footer {
justify-self: flex-end;
background-color: #cdcdcd;
padding: 8px;
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
<p>Very tall content</p>
</div>
<div class="footer">
Footer
</div>
</div>
推荐阅读
- javascript - 离子服务在 Chrome 中出现错误:core.js 中 CreateClass 中的非法构造函数
- php - 将百分比转换为小数并删除 PHP 中的百分号?
- python - 如何从维基百科页面的信息框中提取数据?
- python-3.x - 如何在执行精明边缘之后或之前填充任何图像的整个区域?
- ios - 包含他们使用 Firebase 关注的人的帖子的用户供稿
- python - python numpy数组中选定元素的最小值的索引
- python - gtk3 | Python:命名空间 Gtk 不可用,找不到命名空间“Gtk”(任何版本)的 Typelib 文件(使用 macOS)
- c++ - c ++构造函数成员初始化:传递参数
- php - MySQLi PHP 结果数组不兼容?
- java - 为 Eclipse Photon 安装 Glassfish 工具时出错