当它们的高度由它们的内容定义时，如何确保两个元素在所有屏幕宽度上具有相同的高度？

Question

我有一个现有页面，其中包含两个单独的元素，每个元素的高度由其内容设置 (CodePen here)。如何确保两者在所有屏幕宽度下都具有相同的高度？问题是，我不能使用 CSS flex 或 grid :-/ 相反，这两个元素不能在同一个 flex 容器或 grid 容器中。我这么说是因为已经构建了一个大页面，具有某种 HTML 结构，不允许这些元素位于相同的 flex/grid 容器中 (see sample page here).

我愿意接受一些黑客解决方案。

我也对 JavaScript 持开放态度，如果这可能有帮助的话。

选项

我想到了一个 JavaScript 解决方案来读取元素 2 的高度，并将元素 1 的高度设置为该值。但是如果用户调整他的浏览器大小会发生什么——这两个元素是否保证保持相同的高度？如果用户在移动设备上旋转显示屏会发生什么情况——这两个元素是否保证保持相同的高度？

谢谢。

---

我的 CodePen 代码：

HTML

<div class='a'>Element A</div>
<div class='b'>Element B:  Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. </div>

CSS

.a {
  display: inline-block;
  background-color: yellow;
  width: 45%;
  border: 1px solid black;
}

.b {
  display: inline-block;
  background-color: red;
  width: 45%;
  border: 1px solid black;
}

Answer 1

当然，使用 flexbox 会更容易:)

如果你可以使用表格，那么，你可以做类似的事情：

/* Added */
#wrapper{
 display: table;
 width: 100%;
}

.a {  
  display: table-cell; /* Added */
  vertical-align: top; /* Added */
  /* display: inline-block; */
  background-color: yellow;
  width: 50%; /* Changed */
  border: 1px solid black;
}

.b {
  display: table-cell; /* Added */
  vertical-align: top; /* Added */
  /* display: inline-block; */
  background-color: red;
  width: 50%; /* Changed */
  border: 1px solid black;
}

<div id="wrapper">
  <div class='a'>Element A</div>
  <div class='b'>Element B:  Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. </div>
<div>

如果您需要不同的列，您可以添加一个空列并相应地设置不同的宽度：

#wrapper{
 display: table;
 width: 100%;
}

.a {  
  display: table-cell;
  vertical-align: top;
  background-color: yellow;
  width: 45%; /* Changed */
  border: 1px solid black;
}

.b {
  display: table-cell;
  vertical-align: top;
  background-color: red;
  width: 45%; /* Changed */
  border: 1px solid black;
}

/*added*/
.gap{
  display: table-cell;
  vertical-align: top;
  width: 10%; /* which is 100 - 2* 45 */
}

<div id="wrapper">
  <div class='a'>Element A</div>
  <!-- ------------------------Added------------------------------ -->
  <div class='gap'></div>
  <!-- ----------------------------------------------------------- -->
  <div class='b'>Element B:  Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. </div>
<div>

如果你可以使用 CSS 变量（see comptability）：

#wrapper{
 display: table;
 width: 100%;
 --column-width: 49%; /* so you can set any value between 0 & 50% and the gap will fill the rest */
 --number-of-column: 2; /* minimun 2 */
 --number-of-gap: calc(var(--number-of-column) - 1);
 --column-gap: calc((100% - var(--column-width) * var(--number-of-column)) / var(--number-of-gap));
}

.columns{
  display: table-cell;
  vertical-align: top;
}
.column-content{
  width: var(--column-width);
  border: 1px solid black;
}

.column-gap{
  width: var(--column-gap, 0%); /* If we set just one column, --column-gap is undefined (because it divises by 0), so we need a default value, which is 0% because in this case of only one column, we have no gap column */
}

.a {
  background-color: yellow;
}

.b {
  background-color: red;
}

<div id="wrapper">
  <div class='columns column-content a'>Element A</div>
  <div class='columns column-gap'></div>
  <div class='columns column-content b'>Element B:  Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. </div>
<div>

Answer 2

使用 Flex 怎么样？

HTML：

<div class="row-test">
<div class='a'>Element A</div>
<div class='b'>Element B:  Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. Here is more text. </div>
</div>

CSS：

.a {
  display: inline-block;
  background-color: yellow;
  width: 45%;
  border: 1px solid black;
  flex: 1;
}

.b {
  display: inline-block;
  background-color: red;
  width: 45%;
  border: 1px solid black;
  flex: 1;
}

.row-test {
  display: flex
}

很棒的弹性指南： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flex 支持： https://caniuse.com/#feat=flexbox