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%;
}

试试这个。我想你可能必须使用javascript，如果你想使用滚动的div的高度取决于具有动态内容的div的高度。否则，您可以将它们的高度设置为100％。

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

3 个答案: