bootstrap网格包容器忽略边界

问题描述 投票：0回答：2

我想展示一个带有固定标题的可滚动表格作为网格包布局。

所以我创建了一个外部容器，标题为一行，数据为第二行。

问题是打算用于滚动条的内部容器忽略了out容器的边界。

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

在该片段中，浅灰色容器是外部容器，其大小为完整列表。

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

任何帮助表示赞赏。

css twitter-bootstrap-3 gridbaglayout
2个回答
1
投票

您已将#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，我认为这是一个很好的用途，你正在尝试创建。

-1
投票

你可以添加这个代码css

#listrow {
  
  background-color:lightgrey;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.