Полоса прокрутки и растянута до высоты экрана - PullRequest
Новая
       1

Полоса прокрутки и растянута до высоты экрана

1 голос
/ 29 октября 2019

Мне нужно, чтобы полоса прокрутки появлялась в первом div, если ее содержимое превышает размер экрана. И второй div был растянут по высоте экрана.

Как добавить полосу прокрутки к первому div? overflow: scroll; не работает. 

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.container-fluid{
  flex: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid d-flex">
  <div class="row flex-fill">
    <div class="col-6" style="overflow: scroll;">
<form>
<table class="table">
  <thead>
    <tr>
      <th scope="col">1</th>
      <th scope="col">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>22</td>
    </tr>
    <tr>
      <td>11</td>
      <td>22</td>
    </tr>
    <tr>
      <td>11</td>
      <td>22</td>
    </tr>
    <tr>
      <td>11</td>
      <td>22</td>
    </tr>
  </tbody>
</table>
</form>
</div>
    </div>
    <div class="col-6 bg-success">
    </div>
  </div>
</div>

1 Ответ

1 голос
/ 07 ноября 2019

Чтобы прокрутка работала, вам нужно ограничить div фиксированной высотой или хотя бы некоторой высотой, которая будет меньше высоты содержимого внутри этого div. Для экзамена: 

<body>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid d-flex">
  <div class="row flex-fill" style="height: 200px;">
    <div class="col-6" style="overflow: scroll;height: 100%;">
<form>
<table class="table">
  <thead>
    <tr>
      <th scope="col">1</th>
      <th scope="col">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>22</td>
    </tr>
    <tr>
      <td>11</td>
      <td>22</td>
    </tr>
    <tr>
      <td>11</td>
      <td>22</td>
    </tr>
    <tr>
      <td>11</td>
      <td>22</td>
    </tr>
  </tbody>
</table>
</form>
</div>
    </div>
    <div class="col-6 bg-success">
    </div>
  </div>

    <script type="text/javascript">
        
    </script>

<div class="as-console-wrapper"><div class="as-console"></div></div></body>

Или другим способом указать высоту блока, в котором должна быть включена прокрутка.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...