Высота Flexbox, превышающая экран, становится невидимой сверху - PullRequest
Новая
       9

Высота Flexbox, превышающая экран, становится невидимой сверху

0 голосов
/ 10 января 2019

У меня проблема с оверлеем.

Я хочу наложение, которое позволяет центрировать содержимое на экране любого размера. Проблема с моим методом в том, что он работает нормально, если высота моего контента меньше высоты экрана, но когда высота моего контента больше, он исчезает, и я не могу получить доступ даже с помощью прокрутки: 

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

0 голосов
/ 10 января 2019

Поскольку вы указали #content div #overlay div для центрирования.

Примените 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>
0 голосов
/ 10 января 2019

Я думаю, вам нужно использовать overflow-x: hidden; . Например 

 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code>
0 голосов
/ 10 января 2019

Вы можете попробовать overflow:scroll; для вашего #content div, который позволит вам прокручивать и сделать всю запись видимой. 

#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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...