- 首页
- 前端开发
- Flexbox:页眉、居中的正文和粘性页脚溢出
Flexbox:页眉、居中的正文和粘性页脚溢出
[英] Flexbox: Header, centered body and sticky footer overflow
本文介绍了Flexbox:页眉、居中的正文和粘性页脚溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
更新 由于 LGSon 在下面的评论 更新代码笔
我正在尝试设置一个非常像圣杯的布局.这里的不同之处在于我正在寻找一个动态大小的内容"部分，以垂直和水平居中.
我已经能够使用 flexbox 使其正常工作(用于大型显示器):Codepen 在这里
html, body {宽度:100%；高度:100%；边距:0；填充:0；文本对齐:居中；}.header {高度:60px；行高:60px；宽度:100%；背景:rgba(255, 0, 0, 0.5);}.内容 {高度:计算(100% - 120px)；显示:弹性；弹性方向:列；对齐项目:居中；对齐内容:居中；背景:rgba(0, 255, 0, 0.5);}.内容p{宽度:50%；}.页脚{高度:60px；行高:60px；宽度:100%；背景:rgba(0, 0, 255, 0.5);}.页眉页脚 {字体粗细:粗体；}
<div class="内容"><h1>我是内容</h1><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 包括 Lorem Ipsum 的版本而流行.
<div class="footer">页脚
问题是，如果内容"部分太大，或者视图太小，直到 div 超过 100% 垂直而不是(100% 高度 - 页眉和页脚高度)，溢出才会开始
我试图做到这一点，当有重叠时，整个页面都会滚动，而不仅仅是在内容部分"中有一个滚动条.
解决方案
如果你把你的 html, body 规则改成这样
html, body {边距:0；文本对齐:居中；显示:弹性；弹性方向:列；}
然后添加这个新规则
body {最小高度:100vh；}
然后在您的 content 规则中从 height: calc(100% - 120px); 更改为 flex-grow: 1;将按您的要求工作.
这里的技巧是让你的 body 成为一个 flex 容器，然后，通过将 content 设置为 flex-grow: 1 它当内容较小时将填充剩余空间，并且 min-height: 100vh 将允许它在内容较大时适当地增长到高于视口.
更新代码笔
堆栈片段
html, body {边距:0；文本对齐:居中；显示:弹性；弹性方向:列；}身体 {最小高度:100vh；}.header {高度:60px；行高:60px；背景:rgba(255, 0, 0, 0.5);}.内容 {弹性增长:1；显示:弹性；弹性方向:列；对齐项目:居中；对齐内容:居中；背景:rgba(0, 255, 0, 0.5);}.内容p{宽度:50%；}.页脚{高度:60px；行高:60px；背景:rgba(0, 0, 255, 0.5);}.页眉页脚 {字体粗细:粗体；}
<div class="内容"><h1>我是内容</h1><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 的发布，包括 Lorem Ipsum 的版本.Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 包括 Lorem Ipsum 的版本而流行.Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 包括 Lorem Ipsum 的版本而流行.Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 的发布，包括 Lorem Ipsum 的版本.</p>
<div class="footer">页脚
<小时>
如果有人想让 content 滚动而不是整个页面，请将 body 规则更改为 height: 100vh 并添加overflow: auto 到 content 规则
更新代码笔
堆栈片段
html, body {边距:0；文本对齐:居中；显示:弹性；弹性方向:列；}身体 {高度:100vh；}.header {高度:60px；行高:60px；背景:rgba(255, 0, 0, 0.5);}.内容 {弹性增长:1；显示:弹性；弹性方向:列；对齐项目:居中；背景:rgba(0, 255, 0, 0.5);溢出:自动；}.内容p{宽度:50%；}.页脚{高度:60px；行高:60px；背景:rgba(0, 0, 255, 0.5);}.页眉页脚 {字体粗细:粗体；}
<div class="内容"><h1>我是内容</h1><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 的发布，包括 Lorem Ipsum 的版本.Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 包括 Lorem Ipsum 的版本而流行.Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 包括 Lorem Ipsum 的版本而流行.Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 的发布，包括 Lorem Ipsum 的版本.</p>
<div class="footer">页脚
Update This has been solved thanks to LGSon's comment below Updated codepen
I am trying to setup a layout much like the Holy grail. The difference here is that I am looking for a dynamically sized "Content" section to be vertically and horizontally centered.
I have been able to get this working (for large displays) with flexbox: Codepen here
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.header {
height: 60px;
line-height: 60px;
width: 100%;
background: rgba(255, 0, 0, 0.5);
}
.content {
height: calc(100% - 120px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 255, 0, 0.5);
}
.content p {
width: 50%;
}
.footer {
height: 60px;
line-height: 60px;
width: 100%;
background: rgba(0, 0, 255, 0.5);
}
.header, .footer {
font-weight: bold;
}
<div class="header">
Header
</div>
<div class="content">
<h1>I am the content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="footer">
Footer
</div>
The problem is that if the "Content" section is too large, or the view is too small, the overflow wont kick in until the div is more than 100% vertical not (100% height - the header and footer heights)
I am trying to make it so that when there is overlap, that the whole page will scroll and not only have a scrollbar within the "Content section".
解决方案
If you change your html, body rule to this
html, body {
margin: 0;
text-align: center;
display: flex;
flex-direction: column;
}
and then add this new rule
body {
min-height: 100vh;
}
and then change from height: calc(100% - 120px); to flex-grow: 1; in your content rule it will work as you asked for.
The trick here is to make your body a flex container, and then, by setting the content to flex-grow: 1 it will fill the remaining space when the content is smaller, and the min-height: 100vh will allow it to properly grow higher than the viewport when the content is bigger.
Updated codepen
Stack snippet
html, body {
margin: 0;
text-align: center;
display: flex;
flex-direction: column;
}
body {
min-height: 100vh;
}
.header {
height: 60px;
line-height: 60px;
background: rgba(255, 0, 0, 0.5);
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 255, 0, 0.5);
}
.content p {
width: 50%;
}
.footer {
height: 60px;
line-height: 60px;
background: rgba(0, 0, 255, 0.5);
}
.header, .footer {
font-weight: bold;
}
<div class="header">
Header
</div>
<div class="content">
<h1>I am the content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="footer">
Footer
</div>
And if someone want to enable the content to scroll instead of the whole page, change the body rule to height: 100vh and add overflow: auto to the content rule
Updated codepen
Stack snippet
html, body {
margin: 0;
text-align: center;
display: flex;
flex-direction: column;
}
body {
height: 100vh;
}
.header {
height: 60px;
line-height: 60px;
background: rgba(255, 0, 0, 0.5);
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 255, 0, 0.5);
overflow: auto;
}
.content p {
width: 50%;
}
.footer {
height: 60px;
line-height: 60px;
background: rgba(0, 0, 255, 0.5);
}
.header, .footer {
font-weight: bold;
}
<div class="header">
Header
</div>
<div class="content">
<h1>I am the content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="footer">
Footer
</div>
这篇关于Flexbox:页眉、居中的正文和粘性页脚溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
