全高响应表，带内容

Question

我有正在使用引导程序的应用程序。在这个应用程序中，我的一个视图在左侧包含表格，在右侧包含一些数据。为了获得最佳的用户体验，我将桌子伸展到最大高度，以便用户可以看到设备允许的尽可能多的行。对于其余的行，他可以使用滚动条。

问题是，如果用户的设备非常小，则行驶侧的数据会从看起来难看的容器（灰色区域）中移出。有什么选择可以使我的乘车方向不超出灰色区域吗？

请注意，我的容器的动态高度必须为100％，才能覆盖整个页面。我正在寻找不使用JavaScript的解决方案。

<div class="container">
  <div class="row my-row">
    <div class="col-sm-6 my-col col-1">
      <div class="my-table">
        <div class="my-table-wrapper">
          <div class="my-table-wrapper-2">
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 my-col col-2">
      <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2<br>2 of 2<br>

    </div>
  </div>
</div>

Fiddle

（仅适用于chrome，不知道为什么）

Answer 1

一旦我将容器类的高度更改为自动而不是100％，请选中此选项。希望这会有所帮助

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.my-table
{
  display: table;
  width: 100%;
  height: 100%;
}

.table-row
{
  display: table-row;
}

.my-col
{
  height: 100%;
}
.my-table-wrapper
{
  overflow-y: scroll;
  height: 100%;
  position: relative;
}

.my-table-wrapper-2
{
  position: absolute;

}

.container
{
  height: auto;
  background-color: gray;
  padding: 10px;
}

.my-row
{
  height: 100%;
  margin-top: 0;
  margin: 0;
}

.col-1
{
  background-color: blue;
  padding-right: 0;
}

.col-2
{
  background-color: aqua;
}

html, body
{
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.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>
  
  <!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row my-row">
  <div class="col-sm-6 col-md-6 my-col col-1">
  <div class="my-table">
  <div class="my-table-wrapper">
  <div class="my-table-wrapper-2">
  <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
  </div>
  </div>
  </div>
  </div>
   <div class="col-sm-6 col-md-6 my-col col-2">
      <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2<br>2 of 2<br>
      
    </div>
  </div>
  </div>

http://jsfiddle.net/aq9Laaew/71287/

Answer 2

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.my-table
{
  display: table;
  width: 100%;
  height: 100%;
}

.table-row
{
  display: table-row;
}

.my-col
{
  height: 100%;
}
.my-table-wrapper
{
  overflow-y: scroll;
  height: 50vh;
  position: relative;
}



.container
{
  height: 100%;
  background-color: gray;
  padding: 10px;
}

.my-row
{
  height: 100%;
  margin-top: 0;
  margin: 0;
}

.col-1
{
  background-color: blue;
  padding-right: 0;
}

.col-2
{
  background-color: aqua;
}

<div class="container">
  <div class="row my-row">
    <div class="col-sm-6 my-col col-1">
      <div class="my-table">
        <div class="my-table-wrapper">
          <div class="my-table-wrapper-2">
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
            <div class="table-row">data</div>
           
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 my-col col-2">
     
      <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2<br>2 of 2<br>
      <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2 <br>2 of 2<br>2 of 2<br>
      
    </div>
  </div>
</div>