загрузочная сетка мешка-контейнера игнорирует границы - PullRequest
Новая
       13

загрузочная сетка мешка-контейнера игнорирует границы

0 голосов
/ 01 марта 2019

Я хотел бы показать прокручиваемую таблицу с фиксированным заголовком в качестве макета мешка сетки.

Итак, я создал внешний контейнер, одну строку для заголовка и вторую строку для данных.

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

#maincontainer {
  height:500px;
  background-color:lightgrey;
}

#innercontainer {
  height:100%;
   overflow-y: auto;
}

#headerrow {
  background-color:grey;
  height:200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<html>
<body>
<div class="container" id="maincontainer">
      <div class="row" id="headerrow">
        <div class="col-xs-4">Col 1</div>
        <div class="col-xs-4">Col 2</div>
        <div class="col-xs-4">Col 3</div>
      </div>
      <div class="row" id="listrow">
        <div class="container" id="innercontainer">
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
          <div class="row">
            <div class="col-xs-4">data 1</div>
            <div class="col-xs-4">data 2</div>
            <div class="col-xs-4">data 3</div>
          </div>
        </div>
      </div>    
    
    </div>
    </body>
    </html>

В этом фрагменте светло-серый контейнер является внешним контейнером с размером для полного списка.

Темно-серый заголовок.и приведенные ниже данные должны поместиться в светло-серую рамку и справа показывать полосу прокрутки.

Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Вы установили высоту #innercontainer равной 100%, но не установили ее относительно чего-либо, поэтому она примет высоту тела в этом случае.Что-то вроде этого должно помочь вам в этом: 

#maincontainer {

 position:relative;
  height:500px;
  background-color:lightgrey;
}

#innercontainer {
  height:100%;
   overflow: scroll;
   overflow-x: hidden;
}

#listrow {
  positon: relative;
  height: calc(100% - 50px);
}

#headerrow {
  background-color:grey;
  height:50px;
}

В качестве идентификатора, bootstrap поставляется с хорошим табличным стилем , который, я думаю, является хорошим примером для того, что вы пытаетесь создать..

0 голосов
/ 01 марта 2019

Вы можете добавить этот код CSS 

#listrow {
  
  background-color:lightgrey;
}
...