HTML实现三个并排且高度100%的等高列布局问题求助

问题根源 #

• 你设置的height: 100%没有生效：百分比高度需要父元素有明确的高度定义，默认情况下html和body元素的高度由内容撑开，没有明确高度，所以子元素的100%高度找不到参照值
• float布局本身不适合做等高列场景，还需要额外处理浮动清除、父元素高度坍塌等问题，维护成本高

最优实现方案（Flex布局） #

Flex是目前做多列等高布局最简洁的方案，不需要处理浮动相关的副作用，代码可读性更高。

完整可运行代码

<!DOCTYPE html>
<html>
<head>
<style>
/* 先给根元素设置高度，作为子元素高度的参照 */
html, body {
  height: 100%;
  margin: 0; /* 清除浏览器默认边距 */
  background-color: blueviolet;
}

/* 父容器开启flex布局，子元素默认就会等高 */
body {
  display: flex;
}

.leftcolumn {
  width: 25%; /* 三列总宽度占比总和为100%即可，可自行调整 */
  background-color: brown;
}

.middlecolumn {
  width: 50%;
  background-color: yellowgreen;
}

/* 第三列样式 */
.rightcolumn {
  width: 25%;
  background-color: skyblue;
}
</style>
</head>
<body>
  <div class="leftcolumn">
    <div>test1</div>
  </div>
  <div class="middlecolumn">
    test2
  </div>
  <div class="rightcolumn">
    test3
  </div>
</body>
</html>

方案说明

• 给html和body都设置height: 100%，让子元素的百分比高度可以正常生效
• 父容器开启display: flex后，所有子元素默认就会保持等高，不需要额外给列设置height: 100%
• 直接给每个列设置对应宽度占比即可，不需要加浮动属性

如果确实需要兼容IE9及以下的极端旧浏览器，才需要考虑浮动改造方案，现在所有现代浏览器都完美支持Flex布局，优先选择该方案即可。

内容的提问来源于stack exchange，提问作者Milan