html - 当 sibling 溢出时，表格单元格不填充 div

Question

参见引用资料:http://codepen.io/RuttyJ/pen/oxxvrL当屏幕非常小时，两个 div 在溢出时会改变高度。我希望这两个 div 在不使用 <table> 的情况下始终保持相同的高度。 .

.splash_row{
  display: table;
  table-layout: fixed;
  width: 100%;
  min-width: 200px;
}
.splash_col.half{
  display: table-cell;
  width: 50%;
}
.splash_inside{
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
  background-color: green;
}

编辑:我希望完全填充父列，而不必提高或降低所包含元素的最小高度。我知道 Javascript 可以做到这一点，但 CSS3 可以自己做到吗？

Answer 1

您可以将 min-height 属性添加到类为 .splash_col_content 的 div。它看起来像这样:

.splash_col_text {
最小高度:56px；
背景色:黑色；
白颜色;
字体系列:'EB Garamond'，衬线体；
字体样式:斜体；
字体大小:24px；
填充:12px；
过渡:0.5 秒立方贝塞尔曲线(0.64、0.35、0.58、
}

理想情况下，您可以将该 CSS 放入此媒体查询中，以便它仅在 500 像素以下的屏幕上加载:@media(最大宽度:500 像素)。

代码笔:http://codepen.io/kristywessel/pen/KzzKeP