具有子项的等高列的响应式跨浏览器解决方案

Question

开门见山。

我需要一个响应式两列组件布局的解决方案，如下图所示。

.left / .right 列的宽度比例应始终为 .parent 的 75 / 25%，并且它们的高度应始终保持同步。

.left 列应包含一张图像，该图像的宽度和高度会随着视口的每次变化而缩放，.right 列应包含三个子元素 (.cta)，它们恰好为 1 /3 每个 .parent 高度。

可接受的解决方案的标准是：

支持尽可能多的设备和浏览器（IE9+ 即可）
支持 HTC 等品牌喜欢使用的供应商特定浏览器等
flexbox 不是一个选项
尽管使用 JavaScript 为 .left 和 .right 设置显式高度是微不足道的，但我想提出一个非 JS 解决方案

我最接近满意的解决方案是使用 display: table-cell; 来确保 .left 和 .right 高度始终同步。不幸的是，此解决方案在 IE 中不起作用，因为 CSS 规范明确指出，如果父容器和子容器都使用百分比来定义它们的维度，并且它们依赖于彼此的流来计算这些维度，则结果是未定义的.这会影响 .right 容器高度，它会在除 IE 之外的所有浏览器中扩展到全高。

Codepen example

HTML

<div class="parent">
  <div class="left">
    <div class="image-container"><img class="image" src="http://placehold.it/1300x780" alt="" /></div>
  </div>
  <div class="right">
    <div class="cta">
      <a>LINK #1</a>
    </div>
    <div class="cta">
      <a>LINK #2</a>
    </div>
    <div class="cta">
      <a>LINK #3</a>
    </div>
  </div>
</div>

CSS

.parent {
  display: table;
  width: 90%;
  height: 100%;
  margin: 0 auto;
}

.parent > div {
  display: table-cell;
  height: 100%;
  vertical-align: top;
  text-align: center;
}

.left {
  width: 75%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.right {
  width: 25%;
  background: #bbb;
}

.cta {
  display: table;
  width: 100%;
  height: 33.33%;
  font-family: Helvetica, Arial, sans-serif;  
  overflow: hidden;
  background: #bbb;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

.cta a {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  cursor: pointer;
}

如果一切都失败了，总有 JavaScript 作为备用解决方案。但让我感到困惑的是，在 2016 年。我们仍然被诅咒处理黑客来实现像我需要的这样简单的解决方案。

Answer 1

如果跨浏览器但不适合恐龙，那么 inline-block 和一小撮 calc() 可能会有所帮助：

* {
  box-sizing: border-box;
  margin:0;
}
.parent div div a,
.parent div  div {
  border: solid 1px;
}
.parent div.left {
  padding: 1em;
  border: solid 1px;
}
.parent div {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}
.parent {
  width: 70%;/* demo purpose, do run it in full page too */
  margin: auto;
  background:yellow;
}
img {
  width: 100%;
  display: block;
}
.parent .left {
  width: 75%;
}
.parent .right {
  width: 25%;
}
.parent div div a {
  margin: 0.88em;
  display: block;
  text-align: center;
  /* if floatting pseudo do
  overflow:hidden;*/
}
.parent div div a:before {
  content: '';
  padding-top: calc(60% - 0.5em);/* is calc() allowed ?  if not keep 60% and remove margin:1em from links */
  /* float:left; or with vertical-align */
  display: inline-block;
  vertical-align: middle;
}

<div class="parent">
  <div class="left">
    <div class="image-container">
      <img class="image" src="http://placehold.it/1300x780" alt="" />
    </div>
  </div><!-- cure white-space disturbance
  --><div class="right">
    <div class="cta">
      <a>LINK #1</a>
    </div>
    <div class="cta">
      <a>LINK #2</a>
    </div>
    <div class="cta">
      <a>LINK #3</a>
    </div>
  </div>
</div>

http://codepen.io/anon/pen/VjpdZE

IE11 明白了：

具有子项的等高列的响应式跨浏览器解决方案

Responsive cross browser solution for equal height columns with children

css

height