html - 垂直对齐中间表格单元格响应文本

Question

我想使用表格方法将内容置于 div 中心 --- see first section here

一切都很好，但是我有一个问题。

我有 2 个 div，每个占 50% 的宽度。左边的 div 包含一个长度为 px` 的图像。右侧的 div 包含文本。我可以为包含文本的 div 设置一个高度并且它可以工作，但是，当我缩小屏幕时它没有响应。谁能告诉我，如果有的话，随着屏幕尺寸的减小，可以降低带有文本的 div 高度的技术吗？

我想并排保留 2 个 div，并随着屏幕变小而降低右侧 div 的高度，与右侧图像缩小尺寸的速度相同。

参见 jsfiddle HERE和下面的代码来演示:

HTML

<div class="left">
   <img src="http://www.profightdb.com/img/wrestlers/thumbs-600/1414330df8brethart.jpg">
</div>

<div class="right">
  <div class="table">
    <div class="table-cell">
      <p>Test</p>
      <p>Lorem ipsu se skio sas nie lorem dtakorem ipsu se skio sas nie lorem dtak lorem ipsu se skio sas nie lorem dtak</p>
    </div>
  </div>
</div>

CSS

img {
  width: 100%;
}

.left, .right {
  float: left;
  width: 50%;
}

.table {
  height: 400px;
  display: table;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
}

Answer 1

我更新了你的 fiddle :https://jsfiddle.net/9bjan951/4/

基本上我所做的:

• 添加了一个包装器元素
• 清除 float ，使包装器获得高度
• 将右列设置为绝对位置，并始终为其父列提供 100% 的高度
• 将右表设置为 100% 高度
• 对于窄屏幕，文本会溢出并带有滚动条

大部分魔法都发生在这里:

.right {
  height: 100%;
  background: #c54a8d;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  overflow: hidden;
  overflow-y: auto;
} 

希望对您有所帮助。