CSS - 使所有元素与最高元素的高度相同答案

【问题标题】：CSS - make all elements the same height as the tallest elementCSS - 使所有元素与最高元素的高度相同
【发布时间】：2021-05-13 04:07:43
【问题描述】：

我有一个问题，我在一个 div 中有三个浮动按钮。其中一个按钮的内容比其他按钮多，因此它更高。

我希望能够使所有按钮的高度与最高按钮的高度相同。我试过height: 100%;，但没用。

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <style type="text/css">
    .container {
      width: 320px;
    }
    
    .container button {
      float: left;
      background: #FFFFFF;
      border: 1px solid #CCCCCC;
      width: 33.33%;
    }
  </style>
</head>

<body>
  <div class="container">
    <button>
                <span class="big-text">Okay</span>
                <span class="little-text">123</span>
            </button>
    <button>
                <span class="big-text">Another Option</span>
                <span class="little-text">456</span>
            </button>
    <button>
                <span class="big-text">Nah!</span>
                <span class="little-text">789</span>
            </button>
  </div>
</body>

</html>

https://jsfiddle.net/xpdxyaz6/1/

【问题讨论】：

标签： html css flexbox

【解决方案1】：

只需将display:flex 添加到您的容器类中，如下所示：

.container {
    width: 320px;
    display:flex;
}

jsFiddle：https://jsfiddle.net/AndrewL32/xpdxyaz6/2/

注意：

截至 2021 年 5 月，Flex 属性对浏览器的兼容性如下：

Google Chrome 部分支持前缀 v4 - v20 |完全支持前缀 v21 - v28 |全面支持 v29+

Mozilla Firefox 部分支持前缀 v2 - v21 |部分支持 v22 - v27 |全面支持 v28+

Internet Explorer 部分支持前缀 v10 |部分支持前缀 v11+

Safari 部分支持前缀 v3.1 - v6 |完全支持前缀 v6.1 - v8 |全面支持 v9+

Edge完全支持v12+

【讨论】：

值得一提的是 flex 没有完美的浏览器支持。 caniuse.com/#search=flex
@TalyaS 浏览器支持信息已添加。感谢您的提醒。
display: flex 被恶毒地应用于所有孩子并且无法撤消。这通常是不可取的，因此这种解决方案通常只能在只有少数孩子的情况下使用。

【解决方案2】：

使用min-height怎么样？更新fiddle

 .container {
   width: 320px;
 }
 .container button {
   float: left;
   background: #FFFFFF;
   border: 1px solid #CCCCCC;
   width: 33.33%;
   min-height: 40px;
 }

<div class="container">
  <button>
    <span class="big-text">Okay</span>
    <span class="little-text">123</span>
  </button>
  <button>
    <span class="big-text">Another Option</span>
    <span class="little-text">456</span>
  </button>
  <button>
    <span class="big-text">Nah!</span>
    <span class="little-text">789</span>
  </button>
</div>

【讨论】：

【解决方案3】：

您可以在没有 display:flex 的情况下使用 CSS 规则 padding-bottom: 999999em; 和 margin-bottom: -999999em;在浮动元素上，这将强制网络浏览器呈现相同的高度。您需要在父元素上使用overflow: hidden

查看演示https://jsfiddle.net/xpdxyaz6/3/

【讨论】：