将CSS容器高度设置为子列的最低公共高度

如何仅通过css将容器高度设置为最短列的高度以避免空白？模拟柱（显示：表格*或浮动柱）

---

更新：寻找仅css的解决方案

我知道你的帖子中没有提到

jQuery

，标签中也没有提到，但这是一个解决方案

您可以使用函数获取每个列的高度，保存较小的值并将其设置为容器

我将overflow-y设置为可见，这样您就可以看到js

setheight（）；
函数setheight（）{
$（'.container'）.css（'height'，getminheight（）+'px'）；
}
函数getminheight（）{
var col=$（'.container>.col'），
高度；
$（列）。每个（函数（）{
高度=$（此）.height（）>高度？高度：$（此）.height（）；
});
返回高度；
}

*{
框大小：边框框；
}
.集装箱{
背景：#ef4375；
宽度：100%；
溢出y：滚动；
浮动：左；
}
.container.col{
宽度：33.3%；
浮动：左；
}
.容器.列：第n个子项（1）{
背景：#97b344；
高度：150像素；
}
.container.col:第n个子项（2）{
背景：#febb39；
高度：100px；
}
.container.col:第n个子项（3）{
背景：#33a1ba；
高度：200px；
}

---

我知道你在帖子中没有提到

jQuery

，标签中也没有提到，但这是一个解决方案

您可以使用函数获取每个列的高度，保存较小的值并将其设置为容器

我将overflow-y设置为可见，这样您就可以看到js

setheight（）；
函数setheight（）{
$（'.container'）.css（'height'，getminheight（）+'px'）；
}
函数getminheight（）{
var col=$（'.container>.col'），
高度；
$（列）。每个（函数（）{
高度=$（此）.height（）>高度？高度：$（此）.height（）；
});
返回高度；
}

*{
框大小：边框框；
}
.集装箱{
背景：#ef4375；
宽度：100%；
溢出y：滚动；
浮动：左；
}
.container.col{
宽度：33.3%；
浮动：左；
}
.容器.列：第n个子项（1）{
背景：#97b344；
高度：150像素；
}
.container.col:第n个子项（2）{
背景：#febb39；
高度：100px；
}
.container.col:第n个子项（3）{
背景：#33a1ba；
高度：200px；
}

使用JS是显而易见的，但我正在寻找仅使用css的选项。如果您理解这个问题，并且您的解决方案有效，我将其提高投票。@user3473252我不知道是否存在仅使用css的解决方案，可能存在。我会想。PS:+1:）使用JS是显而易见的，但我正在寻找仅css的选项。如果您理解了这个问题，并且您的解决方案有效，我就投了赞成票。@user3473252我不知道是否有仅css的解决方案，可能有。我会想。附言：+1:）我认为我的问题是相当合法和有用的。Downwoter至少应该提供支持其否决票的评论。你看了我的答案吗？我认为我的问题是非常合法和有用的。Downwoter至少应该提供支持其否决票的评论。你看了我的答案了吗？

╔═════════════╤══════════════╤═════════════╗
║ ┌─────────┐ │ Shortest col │ ┌─────────┐ ║
║ └─────────┘ │ defines      │ └─────────┘ ║
║ ┌─────────┐ │ container    │ ┌─────────┐ ║
║ └─────────┘ │ height       │ └─────────┘ ║
║ ┌─────────┐ │ ┌─────────┐  │ ┌─────────┐ ║
║ └─────────┘ │ └─────────┘  │ └─────────┘ ║
║ ┌─────────┐ │ ┌─────────┐  │ ┌─────────┐ ║
║ └─────────┘ │ └─────────┘  │ └─────────┘ ║
╚══════════════════════════════════════════╝
│ ┌─────────┐ │              │ ┌─────────┐ │
│ └─────────┘ │              │ └─────────┘ │
└─────────────┘              │ ┌─────────┐ │
                             │ └─────────┘ │
                             │ ┌─────────┐ │
                             │ └─────────┘ │
                             └─────────────┘