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

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得到它：