使两列分别可滚动和视口剩余长度的高度

Posted 2023-03-06

【中文标题】使两列分别可滚动和视口剩余长度的高度

【英文标题】：Make two columns separately scrollable and the height of the remaining length of the viewport

【发布时间】：2019-05-20 14:31:29

【问题描述】：

我有一个 JS Fiddle 完全符合我的要求：http://jsfiddle.net/j7ay4qd8/5/

它由两列组成，可单独滚动，左列的不同部分可以通过 javascript 轻松滚动到，而不会影响右列或页面的其余部分。

然而，我为这个示例工作的唯一方法是使用两个导航的 px 对高度进行硬编码。

height:calc(100vh - 90px);

当然，这可能不适用于不同的浏览器、设备和分辨率。

如果添加任何元素或这些导航的大小发生变化，它将中断。

我真正想要的是让#form 自动调整大小以填充视口的剩余部分。

在我当前的示例中，如果我添加另一个元素（例如警报），#content 和 #sidebar 将比视口长，并且在 #content div 滚动后整个页面滚动时我会出现跳跃滚动。

警报和跳跃滚动示例：http://jsfiddle.net/c4k9u0mr/

我找到了这个 jsfiddle，它似乎可以解释我想要使用 flexbox 做什么：http://jsfiddle.net/7yLFL/

但是，我尝试使用 flexbox 进行此操作也没有奏效。我可以让#content 和#guidelines 分别滚动的唯一方法是，如果我给它们一个固定的高度，我又回到了如何使这些 div 成为容器 div 的 100% 的方方面面。

这是我使用 flexbox 失败的尝试（在本例中，它的高度固定为 100 像素）：http://jsfiddle.net/jh6d5ztq/

是否可以在不使用 px 定义固定高度的情况下让第一个和第二个 JS Fiddle 工作？

【参考方案1】：

占据视口剩余高度的所有父元素都需要有一个100% 高度。在引导程序中，使用h-100。

这些元素最近的父元素必须是flex，并且必须有flex-direction: column。在引导程序中，使用d-flex 和flex-column。一些classes 例如row 已经是flex 所以不要使用d-flex。

将flex-grow-1 用于占用剩余高度的元素。同样，一些classes（例如col）有flex-grow:1。

引导弹性类

html,
body 
  height: 100%;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column h-100">
  <div class="py-3 bg-danger">

  </div>
  <div class="py-3 bg-danger">

  </div>
  <div class="flex-grow-1 bg-primary">

  </div>
</div>

---

引导网格

html,
body 
  height: 100%;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="fluid-container h-100">
  <div class="row flex-column h-100">
    <div class="col-auto py-3 bg-danger">

    </div>
    <div class="col-auto py-3 bg-success">

    </div>
    <div class="col bg-primary">

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

---

现在，div.col / div.flex-grow-1 占用视口的剩余高度。但是，如果它们的内容的高度大于viewport 的高度，它们就不会这样做：它们的高度与它们的内容的高度相同。如果要使其可滚动，请使用overflow: auto。我猜，bootstrap-4 没有任何overflow 属性的类。所以你应该使用自定义css。

https://codepen.io/anon/pen/JwWpgQ

---

附带说明，如果您想拥有footer at the bottom，请使用这些方法，但将col 与col-auto 互换

---

如果您想让多个元素分别滚动，请对这些元素使用overflow-auto 和h-100。

html,
body 
  height: 100%;


.overflow-auto 
  overflow: auto;


.h-200vh 
  height: 200vh;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="fluid-container h-100">
  <div class="row flex-column h-100">
    <div class="col-auto py-3 bg-danger">
    </div>
    <div class="col-auto py-3 bg-success">
    </div>
    <div class="col bg-dark d-flex">
      <div class="w-50 h-100 overflow-auto">
        <div class="bg-danger h-200vh"></div>
      </div>
      <div class="w-50 overflow-auto h-100">
        <div class="bg-primary h-200vh"></div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/QzpQRO

---

结论：

像往常一样使用引导网格，但在 row 和 col 上使用 flex-column 作为占据视口所有剩余高度的元素。如果要使其可滚动，请使用自定义 css 应用 overflow:auto。

---

有什么问题可以留言，我会一一解答。我已经解决了你的问题，但我不会发布它，因为我认为你最好先尝试。

更新

这是我的解决方案。 https://codepen.io/anon/pen/Jwrzwm

【讨论】：

我只是在玩这个，现在想弄清楚。我注意到您的第三个示例有一个奇怪的问题，您可以向右滚动，因为页面外有一个偏移量，我认为它需要在第一个 .row 上“无排水沟”。当我有更具体的地方时，我会更新

我让它在#main 上使用绝对位置来偏移侧边栏和导航栏。虽然我不确定这一定是最好的方法：codepen.io/anon/pen/GPvVdE 我很想看看你没有发布比较的解决方案。

好吧，我想我已经解决了只使用填充而不是边距的问题（我想我需要再次阅读框大小）codepen.io/anon/pen/EGwYaP 说我仍然有兴趣看到解决方案你没有发帖。

codepen.io/anon/pen/Jwrzwm 你不应该改变元素的位置。如果您这样做，这些元素将从内容的正常流中删除。然后您需要使用边距和填充将相邻元素定位在正确的位置。 codepen.io/anon/pen/Jwrzwm我刚刚写了这个。我无法访问前几天写的解决方案。我会通过它。如果它比这更好，我将在下周发布它 - 假期后。 @约翰梅勒

当您可以使用网格或固定定位时，是否有理由将 flex 用于外部布局（导航栏和侧边栏）？