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

Question

类似于html layout with only part of the page scrolling但我正在寻找流畅的布局。

当前相关问题的问题是，它使用的是 float ，导致移动 View 上的 View 固定。我试过使用 bootstrap span 但我不确定它是否是当前代码段的替代方法:

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

Bootstrap 片段:

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

如何实现仅部分页面滚动的 bootstrap span 或其他流体布局替代方案？

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>