代码之家 › 专栏 › 技术社区 › jean-max

比屏幕大的flexbox高度在顶部变为不可见

flexbox css html

jean-max · 技术社区 · 6 年前

我的覆盖层有问题。

我想要一个覆盖,可以在每个屏幕大小的中心内容。我的方法的问题是,如果我的内容的高度小于屏幕的高度,它会很好地工作,但是当我的内容的高度较大时,它会消失,即使使用滚动也无法访问:

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

如果高度太大,我想看到屏幕顶部的DIV顶部。知道为什么会这样吗?或者任何其他的解决方案都不能在每个屏幕上工作?谢谢

3 回复 | 直到 6 年前

Paulie_D 6 年前

因为你已经告诉了 #content 的DIV #overlay 分区居中。

应用 justify-content: flex-start; 到 α覆盖 以便可滚动内容可以从顶部开始。

如果你想把内容集中在 较少的 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>

Sushma Yadav 6 年前

你可以试试 overflow:scroll; 为了你 #content 允许滚动和使所有条目可见。

#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 {
  overflow:scroll; 
  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>

Developer Tanbir 6 年前

我想你需要用 溢出-X:隐藏; . 例如

 



#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 {
  overflow:scroll; 
  background-color: black;
  color: white;
}