仅滚动部分页面的html布局的备选方案

类似于，但我正在寻找一个流体布局

当前相关问题的问题是，它使用了float，这导致了移动视图上的固定视图。我尝试过使用bootstrap span，但我不确定它是否是当前代码段的替代品：

测试内容
样本体
项目

项目

项目

项目

项目

项目

项目

项目

项目

项目

所以您应该使用height:100vh来显示浏览器的全高

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="row">
  <div class="col-xs-5 col-12">
    <div style="height:100px; border:1px solid #ff00ff;" class="col-xs-12 col-12">Testing Content1</div>
    <div style="height:120px; border:1px solid #ff00ff;" class="col-xs-12 col-12">Testing Content2</div>
    <div style="height:200px; border:1px solid #fff000;" class="col-xs-12 col-12">Sample Body</div>
  </div>

  <div class="col-xs-7 col-12">
    <div style="border: 1px solid #ff00ff; height: 100vh;
  overflow: auto;">
      <div>
        <span>Scrollable</span>
      </div>
      <div style="height:4000px"></div>
    </div>
  </div>
</div>

测试内容1
测试内容2
样本体
可滚动