Flexbox 高度大于屏幕，在顶部不可见-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

489336

文章

250650551

访问

+关注

分类

暂无分类

日期归档

暂无数据

Flexbox 高度大于屏幕，在顶部不可见

发布于2024-11-03 21:56 阅读(402) 评论(0) 点赞(22) 收藏(4)

我遇到了覆盖问题。

我想要一个可以在任何屏幕尺寸上将内容居中的叠加层。我的方法的问题是，如果内容的高度小于屏幕的高度，它就可以正常工作，但是当内容的高度较大时，它就会消失，即使滚动也无法访问：

#overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 101;
  outline: none;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

#content {
  background-color: black;
  color: white;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div id="overlay">
  <div id="content">
    <div>Some content 1</div>
    <div>Some content 2</div>
    <div>Some content 3</div>
    <div>Some content 4</div>
    <div>Some content 5</div>
    <div>Some content 6</div>
    <div>Some content 7</div>
    <div>Some content 8</div>
    <div>Some content 9</div>
    <div>Some content 10</div>
    <div>Some content 11</div>
    <div>Some content 12</div>
    <div>Some content 13</div>
    <div>Some content 14</div>
    <div>Some content 15</div>
    <div>Some content 16</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
  </div>
</div>

</body>
</html>

Expand snippet

如果高度太大，我希望 div 的顶部位于屏幕顶部。知道为什么会这样吗？或者除了在每个屏幕上都适用之外还有其他解决方案吗？谢谢

解决方案

因为你已经告诉div#content的div#overlay要居中。

应用于，justify-content: flex-start;以便#overlay可滚动的内容可以从顶部开始。

如果您想将内容置于小于100vh 的高度的中心，那么您将需要 javascript，我建议确定内容的高度与覆盖的高度。

#overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* adjust here */
  z-index: 101;
  outline: none;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

#content {
  background-color: black;
  color: white;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div id="overlay">
  <div id="content">
    <div>Some content 1</div>
    <div>Some content 2</div>
    <div>Some content 3</div>
    <div>Some content 4</div>
    <div>Some content 5</div>
    <div>Some content 6</div>
    <div>Some content 7</div>
    <div>Some content 8</div>
    <div>Some content 9</div>
    <div>Some content 10</div>
    <div>Some content 11</div>
    <div>Some content 12</div>
    <div>Some content 13</div>
    <div>Some content 14</div>
    <div>Some content 15</div>
    <div>Some content 16</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>Some content</div>
    <div>End content</div>
  </div>
</div>

</body>
</html>