时间戳

首页 > 解决方案 > 如何使用 scroll-y 和 flexbox 获得 2 个 div 相同的高度

html - 如何使用 scroll-y 和 flexbox 获得 2 个 div 相同的高度

问题描述

我希望这个可滚动的 div 与它旁边的 div 高度相同。这是我到目前为止得到的：

<div style="display: flex">
    <div>
       The height must be determined by this div.
    </div>
    <div style="overflow-y: scroll">
       This div has a lot of content.
       The height must follow the div next to me.
    </div>
</div>

不幸的是，正确的 div 总是与其内容一样大。两个 div 都有动态内容，所以我不知道确切的高度。

标签： htmlcssflexbox

解决方案

首先阅读她之间的差异： overflow-y: scroll到auto（在您的情况下最好使用自动）。 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

再前一步align-items: flex-start;（像这样 col 的高度不匹配）。

.parent {
  display: flex;
  align-items: flex-start;
}

如何在 Flexbox 中禁用等高列？

“真正的”解决方案（适用于所有情况） - 仅通过 Javascript

/* set max-height by code */
var colHeight = document.getElementById("child_1").getBoundingClientRect().height;
console.log(colHeight);
document.getElementById("child_2").style.maxHeight = colHeight+"px";
.parent {
  display: flex;
}

#child_1{
  border: 3px solid orange;
}
#child_2 {
  overflow-y: auto;
  border: 2px solid violet;
}
<main class='parent'>
  <div id="child_1">
    <p>
      Fit to content in all cases - Fit to content in all cases  - Fit to content in all cases - Fit to content in all cases 
    </p>
    <p>
      Fit to content in all cases - Fit to content in all cases  - Fit to content in all cases - Fit to content in all cases 
    </p>
  </div>
  <div id="child_2">
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
  </div>
</main>

额外步骤（如果窗口调整大小，则设置最大高度）

当您max-height通过代码设置时 - 每次浏览器调整大小时都应该运行它（响应式站点的更安全方法）： 如何在每次调整 HTML 元素大小时运行 JavaScript 函数？ 

function resize() {
/* set max-height by code */
var colHeight = document.getElementById("child_1").getBoundingClientRect().height;
console.log(colHeight);
document.getElementById("child_2").style.maxHeight = colHeight+"px";
console.log('resized');
}

resize();
window.onresize = resize;
.parent {
  display: flex;
  align-items: flex-start;
}

#child_1{
  border: 3px solid orange;
}
#child_2 {
  overflow-y: auto;
  border: 2px solid violet;
}
<main class='parent'>
  <div id="child_1">
    <p>
      Fit to content in all cases - Fit to content in all cases  - Fit to content in all cases - Fit to content in all cases 
    </p>
    <p>
      Fit to content in all cases - Fit to content in all cases  - Fit to content in all cases - Fit to content in all cases 
    </p>
  </div>
  <div id="child_2">
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
  </div>
</main>

额外阅读：

在手机上禁用：

这个max-height技巧在小屏幕上不是很有用。一种解决方案（如果窗口宽度高于 X 运行功能）。

function resize() {
  /* set max-height by code */
  if (window.innerWidth > 960) {
    var colHeight = document.getElementById("child_1").getBoundingClientRect().height;
    console.log("window width" + window.innerWidth +"px");
    document.getElementById("child_2").style.maxHeight = colHeight+"px";
  }
}

resize();
window.onresize = resize;

如果屏幕宽度小于 960 像素，请执行某些操作

为什么 CSS 还不够？

请记住“最大高度”，没有任何溢出 =“无响应”站点。

选项 1 - 左列比右列短：

将右列高度设置为：max-height: 100px;

.parent {
  display: flex;
}

#child_1{
  border: 1px solid lightgray;
}
#child_2 {
  overflow-y: scroll;
  max-height: 100px;
  border: 1px solid violet;
}
<main class='parent'>
  <div id="child_1">
    <p>
      Very short content
    </p>
  </div>
  <div id="child_2">
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
  </div>
</main>

选项 2 - 左列比右列长：

在这种情况下，一个选项是max-height为父级设置（非常非常无响应的方法 - 因为您应该为两个列声明溢出）+ 非常奇怪的 UI：

.parent {
  display: flex;
  max-height: 100px;
}

#child_1{
  border: 3px solid orange;
  overflow-y: scroll;
}
#child_2 {
  overflow-y: scroll;
  border: 1px solid violet;
}
<main class='parent'>
  <div id="child_1">
    <p>
      Tall div
    </p>
    <p>
      Tall div
    </p>
    <p>
      Tall div
    </p>
    <p>
      Tall div
    </p>
    <p>
      Tall div
    </p>
  </div>
  <div id="child_2">
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
    <p>
      This div has a lot of content.
      The height must follow the div next to me.
    </p>
  </div>
</main>

推荐阅读