使一个 div 的高度填充剩余空间，但不要越过另一个 div [重复]

Posted 2023-03-06

【中文标题】使一个 div 的高度填充剩余空间，但不要越过另一个 div [重复]

【英文标题】：Make Height of One Div Fill Remaining Space, But Not Go Past Another Div [duplicate]

【发布时间】：2020-12-22 17:35:11

【问题描述】：

我正在尝试用 css 做一些有点棘手的事情。

在我的页面上，我有两个并排的 div。两个 div 的内容都可以根据用户操作发生变化（可以多也可以少）。

Div #1（左 div）需要依赖于 div #2（右 div）的高度。 div #1 应该填满 div #2 的剩余空间，但它不应该超过 div #2 的高度。它的溢出应该被滚动。

然而 div #2 的高度不应受到限制，它应该能够根据需要增大或缩小，无需滚动。

我可以将 div #1 设置为某个高度并为其溢出滚动，但如果 div #2 增长，它看起来像这样：

我希望 div #1 与 div #2 一起增长，但不要超过它。

简而言之，div #1 的高度需要依赖于 div #2。

我为此做了一个演示：https://stackblitz.com/edit/dependent-height-demo?file=app/app.component.css

我希望 css 发生在（理想情况下）app.component.css，因为在实际应用中很难影响组件的样式。

（编辑：*** 说这是“如何将外部 div 的高度设置为始终等于特定内部 div？”的副本？不是因为这不涉及内部 div，所以'将两个 div 彼此相邻。这是不同的，并且该问题的解决方案对我没有帮助。）

感谢您提供的任何帮助！

【问题讨论】：

错误：跨域 localStorage 被浏览器阻止，但 devserver 需要。请启用 3rd 方 cookie 或为 stackblitz.io 添加例外以解决。请在此处发布您的代码

我不认为你可以单独使用 CSS 来做到这一点（不改变你的标记），因为 CSS 真的是不知道内容的。您可以做的是设置一个 CSS 自定义属性/var，每次单击 make content 按钮时，它都会保留右 div 的高度 - 然后这个 CSS var 将用于设置左侧列上的 max-height。

你接受的答案是重复的，所以要么你没有打开链接检查重复，要么我不知道为什么它不是重复的

【参考方案1】：

你可以这样做 -

.wrapper 
  display: grid;
  grid-template-columns: 100px 1fr;


.wrapper div 
  border: 1px solid red;


.wrapper .left 
  position: relative;
  overflow: hidden;


.wrapper .left .inner 
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: scroll;

<div class="wrapper">

  <div class="left">
    <div class="inner">
      left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br> left<br>
    </div>
  </div>

  <div class="right">
    right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right
    right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right
  </div>

</div>

我在这里所做的是-

我已将左侧面板的内容包装在一个名为 inner 的类中。 我已将position: absolute 添加到inner 类并添加height: 100% 以匹配左侧面板的高度。左面板的高度将取决于右面板。 我已将overflow-y: scroll 添加到inner 类中，以便在内容大于高度时垂直滚动。

【参考方案2】：

Aside 元素是可滚动的，并且高度与 Main 之一匹配：

* 
  box-sizing: border-box;
  margin: 0;


#app 
  display: flex;


#aside 
  position: relative;
  overflow: auto;
  width: 200px;
  background: #ffc;


#main 
  flex: 1;
  background: #fcc;


.full 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

<div id="app">

  <aside id="aside">
    <div class="full">ASIDE<br>Lorem...</div>
  </aside>

  <main id="main">
    MAIN
  </main>

</div>

【讨论】：

这很好用，只需要将我拥有的部分包装在一个side元素中（带有一些额外的样式）！我在我的闪电战中实现了解决方案（在testing Aside 部分）：stackblitz.com/edit/…