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

Question

直截了当。

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

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

.left 列应包含一个图像，该图像会随着每个视口的变化而在宽度和高度上进行缩放，.right 列应包含三个子元素 (.cta)，每个子元素恰好占 .parent 高度的 1/3 .

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

• 支持尽可能多的设备和浏览器（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 得到它：