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

Question

我有一个现有页面，有两个单独的元素，每个元素的高度由其内容设置 ( CodePen here )。如何确保两者在所有屏幕宽度下具有相同的高度？问题是，我不能使用 CSS flex 或 grid :-/相反，这两个元素不能位于同一个 flex 容器或网格容器中。我这么说是因为已经构建了一个大页面，具有特定的 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

Sure, it would be easier with 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>