使两个元素高度相等，一个带有垂直滚动条

Question

我正在尝试使两个同级 div 元素具有相同的高度。它们中有一个溢出-y 和一个带有可变高度内容的滚动条。主 div 的内容也是可变高度的，具体取决于动态内容和浏览器宽度。主要内容 div 应显示其所有内容。左侧滚动面板应与主要内容的高度相同，无论浏览器的宽度或内容的高度如何，因此滚动条。

以前，我会使用 jQuery，检测窗口宽度变化并进行相应调整。但我试图在 React 应用程序中做到这一点.. 所以理想情况下它只会是 CSS。这可能吗？

HTML：

<div class="parent">
    <div class="panel-with-scroll">
       <div class="panel-inner">
        <p>panel with scroll</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
      </div>
    </div>
    <div class="content">
      <p>content panel</p>
    </div>
  </div>

CSS：

.parent {
  width: 600px;
  display: flex;
}

.panel-with-scroll {
  width: 200px;
  height: 400px;
  overflow-y: scroll;
  background: pink;
}

.content {
  background: yellow;
  width: 400px;
  height: 300px;
}

标记和 css 的示例在 JSBIN 中：

https://jsbin.com/yivonew/edit?html,css,output

Answer 1

为此，将panel-inner 绝对定位并在其上设置overflow-y: scroll。

这样您就可以使content 根据其内容动态调整大小，并使面板始终等高，并在其内容不适合时滚动

.parent {
  width: 600px;
  display: flex;
}
.panel {
  position: relative;
  width: 200px;
  background: pink;
}
.panel-inner {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  overflow-y: scroll;
}
.content {
  background: yellow;
  width: 400px;
}

<div class="parent">
    <div class="panel">
       <div class="panel-inner">
        <p>panel with scroll</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
         <p>..</p>
      </div>
    </div>
    <div class="content">
      <p>content panel</p>
      <p>content panel</p>
      <p>content panel</p>
      <p>content panel</p>
      <p>content panel</p>
    </div>
  </div>

Answer 2

在父元素中设置高度，而不是在子元素中：

.parent {
width: 600px;
height: 400px;
display: flex;
}

.panel-with-scroll {
width: 200px;
overflow-y: scroll;
background: pink;
}

.content {
background: yellow;
width: 400px;
}

Answer 3

.parent {
width: 600px;
height: 400px;
display: flex;
}

.panel-with-scroll {
width: 200px;
height: 100%;
overflow-y: scroll;
background: pink;
}

.content {
background: yellow;
width: 400px;
height: 100%;
}

试试这个。如果您希望带有滚动条的 div 的高度依赖于带有动态内容的 div 的高度，我认为您可能必须使用 javascript。否则，您可以将它们的高度都设置为 100%。