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

Question

我希望这个可滚动的 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都有动态内容，所以我不知道确切的高度。

Answer 1

首先阅读她之间的差异： 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>

额外阅读：

• getBoundingClientRect： https : //www.w3schools.com/jsref/met_element_getboundingclientrect.asp
• onresize: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize

在手机上禁用：

这个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>

Answer 2

一个简单的解决方案是向父元素添加height或max-height 。 这样两个孩子在任何宽度上都有相同的高度。

// HTML
<div id='container' class='parent'>
    <div id='content' class='child'>
       The height must be determined by this div.
    </div>
    <div class='child'>
       This div has a lot of content.
       The height must follow the div next to me.
    </div>
</div>

// CSS
.parent {
  display: flex;
  max-height: 70px; // remove if using JavaScript
}

.child {
  overflow: scroll;
}

或者，您可以使用 JavaScript 来确定第一个子元素的当前高度，并将其设为父元素的高度。

添加：

// JS
const container = document.getElementById('container');
const content = document.getElementById('content');

const updateContainer = () => {
  let contentHeight = content.clientHeight + 'px';

  container.style.height = contentHeight;
}

updateContainer();

这只是一个例子。 您需要使用事件侦听器来触发该函数。