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

Question

如何通过仅将css设置容器高度设置为最短柱的高度以避免白色空隙？将模拟colums（显示：table *或float columns）

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

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

Answer 1

我知道你在帖子中没有提到jQuery，也没有在标签中提及，但这是一个解决方案。

您可以执行一项功能来获取每个col的高度，保存较小的值并将其设置为容器。

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

＆＃13;

＆＃13;

setheight();

function setheight(){
	$('.container').css('height', getminheight()+'px');
}

function getminheight(){
	var col = $('.container > .col'),
  		height;
  $(col).each(function(){
  	height = $(this).height() > height ? height : $(this).height();
  });
  return height;
}

＆＃13;

* {
  box-sizing: border-box;
}

.container {
  background: #ef4375;
  width: 100%;
  overflow-y: scroll;
  float: left;
}

.container .col {
  width: 33.3%;
  float: left;
}

.container .col:nth-child(1){
  background: #97b344;
  height: 150px;
}

.container .col:nth-child(2){
  background: #febb39;
  height: 100px;
}

.container .col:nth-child(3){
  background: #33a1ba;
  height: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

＆＃13;

＆＃13;

＆＃13;