Flexbox：标题，居中的主体和粘性页脚溢出 [英] Flexbox: Header, centered body and sticky footer overflow

查看：73
本文介绍了Flexbox：标题，居中的主体和粘性页脚溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

更新由于LGSon的评论如下 更新的codepen



我试图设置一个非常像圣杯的布局。这里的区别是，我正在寻找一个动态大小的内容部分垂直和水平居中。

我已经能够得到这个工作（用于大型显示​​器）： 此处的Codepen

html，body {width：100％;身高：100％保证金：0;填充：0; text-align：center;}。header {height：60px; line-height：60px;宽度：100％;背景：rgba（255,0,0,0.5）;}。content {height：calc（100％ - 120px）;显示：flex; flex-direction：column; align-items：center; justify-content：center;背景：rgba（0,255,0,0.5）;}。content p {width：50％;}。footer {height：60px; line-height：60px;宽度：100％;背景：rgba（0,0,255,0.5）;}。header，.footer {font-weight：bold;} 

 < div class =header>标题< / div>< div class =content> < h1>我是内容< / h1> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是这个行业的标准虚拟文本，当时一台不知名的打印机拿起了一个类型的厨房，并把它打成一个样本书。它不仅存活了五个世纪，还有电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到推广。< / p>< / div>< div class =footer >           部分太大，或视图太小，溢出不会踢直到div超过100％垂直不（100％的高度 - 页眉和页脚的高度）
 
 
我试图做到这样，当有重叠时，整个页面将滚动，不仅在内容部分内有一个滚动条。
解决方案
如果您将 html，body 规则更改为此 
 
 
  html，body {
 margin：0; 
 text-align：center; 
 display：flex; 
 flex-direction：column; 
} 
  
然后添加这个新规则
 
 
  body {
 min-height：100vh; 
 
 $ / code> 
然后从 height：calc（100％ -  120px）; 到 flex-grow：1; 在你的内容按照你的要求工作。
 
 
 
这里的技巧是让你的 body 一个flex容器，然后通过设置内容为 flex-grow：1 当内容变小时，它将填充剩余空间， code> min-height：100vh 将允许它在内容较大时正确增长到高于视口。
 href =https://codepen.io/anon/pen/gRKOoz?editors=1100 =nofollow noreferrer>更新了codepen  
 
 
 
堆栈snippet 
 
 $ b  
 
 
  {margin：0; text-align：center;显示：flex; flex-direction：column;} body {min-height：100vh;}。header {height：60px; line-height：60px;背景：rgba（255,0,0,0.5）;}。content {flex-grow：1;显示：flex; flex-direction：column; align-items：center; justify-content：center;背景：rgba（0,255,0,0.5）;}。content p {width：50％;}。footer {height：60px; line-height：60px;背景：rgba（0,0,255,0.5）;}。header，.footer {font-weight：bold;}  

 < div class =header>标题< / div>< div class =content> < h1>我是内容< / h1> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机拿起了一个类型的厨房，把它打成一个样本书。它不仅存活了五个世纪，还有电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及。 Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是这个行业的标准虚拟文本，当时一台不知名的打印机拿起了一个类型的厨房，并把它打成一个样本书。它不仅存活了五个世纪，还有电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及.Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机拿起了一个类型的厨房，把它打成一个样本书。它不仅存活了五个世纪，还有电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及.Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是这个行业的标准虚拟文本，当时一台不知名的打印机拿起了一个类型的厨房，并把它打成一个样本书。它不仅存活了五个世纪，还有电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及。 < / p>< / div>< div class =footer> Footer< / div>

如果有人想让内容滚动而不是整个页面，将 body 规则更改为 height：100vh 并将 overflow：auto 添加到内容规则



更新的codepen p>

堆栈片段 

  html，body {margin：0; text-align：center;显示：flex; flex-direction：column;} body {height：100vh;}。header {height：60px; line-height：60px;背景：rgba（255,0,0,0.5）;}。content {flex-grow：1;显示：flex; flex-direction：column; align-items：center;背景：rgba（0，255，0，0.5）; overflow：auto;}。content p {width：50％;}。footer {height：60px; line-height：60px;背景：rgba（0,0,255,0.5）;}。header，.footer {font-weight：bold;}  

 < div class =header>标题< / div>< div class =content> < h1>我是内容< / h1> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机拿起了一个类型的厨房，把它打成一个样本书。它不仅存活了五个世纪，还有电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及。 Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机拿起了一个类型的厨房，把它打成一个样本书。它不仅存活了五个世纪，还有电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及.Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从16世纪以来一直是这个行业的标准虚拟文本，当时一台不知名的打印机拿起了一个类型的厨房，并把它打成一个样本书。它不仅存活了五个世纪，还有电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及.Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机拿起了一个类型的厨房，把它打成一个样本书。它不仅存活了五个世纪，还有电子排版的飞跃，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset工作表的发布以及最近的包括Aldus PageMaker在内的桌面出版软件（包括Lorem Ipsum的版本）而得到普及。 < / p>< / div>< div class =footer>页脚< / div>


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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆