CSS Flexbox：所有元素高度相同？

Question

使用CSS和flexbox，我不明白如何使div“a”和“b”具有相同的高度。我需要将b变得更高以匹配a的高度。换句话说，灰色框应该与红色框一样高。

我认为只需要给a和b都设置flex:1，它们就会具有相同的高度。但实际情况并非如此。

我尝试将flex-basis:0分别设置给“a”和“b”，但是内容被截断了。我不能截断a，我需要将b放大。

#cont1{
    display:flex;
    flex-direction:column;
}

#a{
    background-color:red;
    flex:1;
}

#b{
    background-color:grey;
    flex:1;
}

<div id="cont1">
    <div id="a">
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
        <h1>title</h1>
    </div>
    <div id="b">
        short text
    </div>
</div>

JSFiddle version

- seguso

---

有一个例子，但是使用JavaScript :( ... https://jsfiddle.net/wothbd5z/1/ - nelek

Answer 1

如果您可以在没有弹性盒模型的情况下“存活”，那么定位属性可以实现这一点。

#cont1{
}

#a{
    background-color:red;
    position: relative;
}

#b{
    background-color:grey;
    position: absolute;
    left: 0; top: 100%;
    width: 100%;
    height: 100%;
}

<div id="cont1">
    <div id="a">
      <h1> title </h1>
      <h1> title </h1>
      <h1> title title title title title title title title title</h1>
      <div id="b">
        short text
      </div>
    </div>
</div>

- Asons

Answer 2

指定弹性容器的高度。

尝试这样做：

#cont { 
     display: flex;
     flex-direction: column;
     height: 400px;
}

你需要为弹性项创建一个定义好的空间来分配。

---

更新（基于评论）

没错...这是我需要实现的：http://www.jsfiddle.net/s2b0v4ph（请在宽屏幕上观看，因为有断点）

问题在于：如果箱子#2变得更高，那么箱子#2和箱子#5之间的对齐就会破裂：http://www.jsfiddle.net/s2b0v4ph/1

布局按编码完美运行。主要弹性容器 (.flex-md) 中的弹性项占据了容器的全部高度。不管你在盒子#1或#2中添加了多少内容，包含盒子#5和#6的列都将等高。

主要弹性容器中的所有列 (<div class="row flex-md" id="row-quadrati">) 高度相等，无论内容数量如何。http://jsfiddle.net/s2b0v4ph/1/

当添加内容时，箱子#5与箱子#2不对齐的原因是它们分别存在于不同的弹性格式上下文中。换句话说，这些盒子存在于不同的弹性容器中。

具体来说，盒子#1、#2和#3都是 #quadr-col-1 的弹性项，而盒子#4、#5和#6都是 #quadr-col-2 的弹性项。 #quadr-col-1 和 #quadr-col-2 都是主要弹性容器的弹性项，它们本身也是（嵌套的）弹性容器。

由于这些盒子存在于单独的弹性容器中，它们之间没有共享相等高度的理由。如果你想应用弹性等高特性，请将它们全部放在同一个弹性容器中。

- Michael Benjamin

---

谢谢，但这违反了使用flexbox的目的。我不知道高度，因为它取决于浏览器窗口宽度。当我缩小窗口时，文本换行并且容器的高度增加。 - seguso

这并不违背 flexbox 的目的。flex-grow 和 flex-shrink 通过分配 flex 容器中可用的空间来工作。那么 flex 容器的高度是多少？如果不知道有多少空间，flex 怎么能分配空间呢？ - Michael Benjamin

Flex 可以简单地给容器设置“最小”高度，使得 a 和 b 具有相同的高度... - seguso

不确定我是否理解您的意思。也许您可以在问题中提供更多详细信息，或添加前/后图像。 - Michael Benjamin

是的，这可能需要对您的代码进行一些基本的重构。我不使用Bootstrap，这就是为什么我没有尝试自己做的原因；我不确定我能提供最有效的解决方案。我会在下班后今晚再看一遍。 - Michael Benjamin

Answer 3

我用JavaScript解决了这个问题，但我仍然对CSS的解决方案感兴趣：

function computeMaxHeight(els) {
    var ht = 0;
    els.forEach(function (el) {
        var elht = el.height();
        if (elht > ht) {
            ht = elht;
        }
    });
    return ht;
}

function setMinMeight(els) {
    var maxht = computeMaxHeight(els);
    //console.log("here resize. maxht = " + maxht);

    els.forEach(function (el) {
        el.css('min-height', maxht);
    });

}

$(document).ready(function () {

    var els = [$("#non-porre-limiti"), $("#we-love-pagi"), $("#vuoto"), $("#pagiletter"), $("#pagi-focus")];

    $(window).on('resize', function () {
        setMinMeight(els);

    });

    setMinMeight(els);

});

代码片段: http://jsfiddle.net/s2b0v4ph/3/

- seguso

Answer 4

这是我对这个问题的JS解决方案，它选择任意数量的元素中最高的一个，并相应地调整其他元素的高度。

let elements = document.querySelectorAll('.element-name');

if (elements) {
    let arr = [];

    let fixHeight = () => {
        for (let i = 0; i < elements.length; ++i) {
            let height = elements[i].offsetHeight;
            arr.push(height);

            var highest = Math.max(...arr);
        }

        elements.forEach((el) => {
            el.style.height = highest + 'px';
        });
    };

    fixHeight();

    window.addEventListener('resize', () => {
        fixHeight();
    });
}

我对这个问题也很感兴趣，希望能找到一个更简洁的CSS解决方案。

- Curious Programmer

Answer 5

关键在于这部分

.xyz {
  width: 70%;
  box-shadow: 0 0 30px;
  text-align:center;
  -webkit-flex: 9 0 0; 
  flex: 9 0 0; 
}

http://codepen.io/damianocel/pen/XmxmQE

现在这些 div 元素将拥有相同的高度，无论页面整体高度如何。

这是您寻找的内容吗？

- damiano celent

---

有趣的是，我希望灰色框的大小能够与红色框的高度相匹配，但不要超过它。在你的代码中，height:100vh可以解决这个问题，但会使得框比必要的高。 - seguso