仅滚动部分页面的 html 布局的替代方法

Question

类似于只有部分页面滚动的html布局，但我正在寻找一个流畅的布局。

当前相关问题的问题在于，它使用了浮动，这导致了移动视图上的固定视图。我尝试使用引导跨度，但我不确定它是否是当前代码片段的替代品：

<div style="width:1250px;">
<div style="float:left; width:1000px">
<div style="height:120px; border:1px solid #ff00ff;">Testing Content</div>
<div style="height:200px; border:1px solid #fff000;">Sample Body</div>

</div>
<div style="float:right; width:100px; height:320px; overflow:auto;">
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
<p>items</p>
</div>
</div>

引导代码段：

<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: 420px;
overflow: auto;">
<div>
<span>Scrollable</span>
</div>
<div style="height:1000px"></div>
</div>
</div>
</div>

如何实现引导跨度或其他仅通过部分页面滚动的流畅布局替代方案？

Answer 1

所以你应该使用 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>