bootstrap 网格包容器忽略边界

Question

我想展示一个可滚动的 table，固定 header 作为网格包布局。

所以我创建了一个外部容器，一行用于 header，第二行用于数据。

问题是原本用于滚动条的内部容器忽略了外部容器的边界。

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

在该代码段中，浅灰色容器是具有完整列表大小的外部容器。

深灰色的是header。并且下面的数据应该适合浅灰色框并在右侧显示滚动条。

感谢任何帮助。

Answer 1

您可以添加此代码css

#listrow {
  
  background-color:lightgrey;
}

Answer 2

您已将#innercontainer 的高度设置为 100%，但没有相对于任何对象设置它，因此在这种情况下它将采用 body 的高度。这样的事情应该会让你上路：

#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 附带了一些很好的 table styling，我认为这是您尝试创建的一个很好的用例。

bootstrap 网格包容器忽略边界

bootstrap grid bag container ignores boundaries

css

gridbaglayout

twitter-bootstrap-3