时间戳

首页 > 解决方案 > 仅部分页面滚动的 html 布局的替代方案

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

问题描述

类似于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>

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

标签： htmlcss

解决方案

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

推荐阅读