Flexbox： Headers ，居中的身体和粘性页脚溢出-Java 学习之路

Update 由于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％高度 - 页眉和页脚高度）

我试图这样做，以便当有重叠时，整个页面将滚动，不仅在“内容部分”内有一个滚动条 .

2 回答

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

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

然后添加此新规则

body {
  min-height: 100vh;
}

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

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

Updated codepen

堆栈代码段

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

堆栈代码段

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>

回复于 2024-04-19T21:48:24+08:00

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

删除不透明的背景颜色，并用看起来完全相同的非透明背景颜色替换它们（我已经这样做了）
删除文章的背景颜色，然后改为 html, body 背景颜色
在这种情况下
使用 background-color 而不是 background ：

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

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

CodePen

回复于 2024-04-19T21:48:24+08:00

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

2 回答

相关问题