Вертикальная полоса прокрутки скрывает элемент с абсолютной позицией - PullRequest
Новая
       43

Вертикальная полоса прокрутки скрывает элемент с абсолютной позицией

0 голосов
/ 06 ноября 2019

У меня есть элемент с абсолютной позицией, который отображается над вертикальной прокруткой, не позволяя пользователю прокручивать страницу с помощью полосы прокрутки.

a busy cat

Эта скрипка объясняет проблему и то, что я сейчас делаю.

Это CSS, который я использую для позиционирования div. 

.side-content {
  background: grey;
  position: absolute;
  right: 0;
  top: 60px;
  height: calc(100% - 132px);
  width: 100px;
}

Я ожидал, что div будет позиционированучитывая полосу прокрутки (без добавления поля) и не парить его. Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 06 ноября 2019 

body {
    margin: 0;
    text-align: center;
  }
  .wrapper
  {
    position:absolute;
    width: 100%;
    height:100%;
    display: flex;
  }
  .inside_div_one
  {
    width:10%;
    height:100%;
    background-color: green;
  }
  .inside_div
  {
    width: 25%;
  }
  .inside_div_two
  {
    width:80%;
    height:100%;
  }
  .inside_div_three
  {
    width:10%;
    height:100%;
    background-color: grey;
  }
<html>
  <head>
    
  </head>
  <body>
    <div class="wrapper">
      <div class="inside_div_one">
        <p>sidebar</p>
      </div>
      <div class="inside_div_two">
        <p>FIRST</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>LAST</p>
      </div>
      <div class="inside_div_three">
        <p>jvsdfv</p>
      </div>
    </div>
  </body>
</html>
0 голосов
/ 06 ноября 2019

до z-index: -50;

.side-content {
  z-index: -50;
  background: grey;
  position: absolute;
  right: 0;
  top: 60px;
  height: calc(100% - 132px);
  width: 100px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...