Question

更新由于LGSon的评论 Updated codepen

，这已经得到解决

我正在尝试设置一个类似圣杯的布局。这里的不同之处在于我正在寻找一个动态调整大小的“内容”部分，使其垂直和水平居中。

我已经能够使用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>

问题是如果“内容”部分太大，或者视图太小，溢出将不会启动，直到div超过100％垂直（100％高度 - 页眉和页脚高度）

我正在尝试这样做，以便当有重叠时，整个页面将滚动，并且不仅在“内容”部分中有一个滚动条。

Answer 1

如果您将html, body规则更改为此

html, body {
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
}

然后添加此新规则

body {
  min-height: 100vh;
}

然后在height: calc(100% - 120px);规则中从flex-grow: 1;更改为content，它将按照您的要求运行。

这里的诀窍是让你的body成为一个弹性容器，然后通过将content设置为flex-grow: 1，它会在内容较小时填充剩余空间，并且当内容较大时，min-height: 100vh将允许它比视口正确增长。

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>

如果有人想要让content滚动而不是整页，请将body规则更改为height: 100vh并将overflow: auto添加到content规则

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>

Answer 2

在页眉和页脚上使用position: fixed;后，我的syggestion是：

删除不透明的背景颜色，并将其替换为看起来完全相同的非不透明背景颜色（我已经这样做了）
删除文章的背景颜色，然后将html, body改为背景颜色
使用background-color代替background：

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #7FFF7F;
  text-align: center;

}

.header {
  position: fixed;
  top: 0px;
  height: 60px;
  line-height: 60px;
  width: 100%;
  background-color: #FF7F7F;
}

.content {
  overflow: scroll;
  padding: 60px 0 60px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.content p {
  width: 50%;
}

.footer {
  position: fixed;
  bottom: 0px;
  height: 60px;
  line-height: 60px;
  width: 100%;
  background-color: #7F7FFF;
}

.header,
.footer {
  font-weight: bold;
}

＆＃13;

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

＆＃13;

CodePen

Flexbox：标题，居中的身体和粘性页脚溢出

2 个答案: