table-当兄弟溢出时单元格未填充 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 属性添加到 div 和 class .splash_col_content。它看起来像这样：

.splash_col_text { min-height: 56px; background-color: black; color: white; font-family: 'EB Garamond', serif; font-style: italic; font-size: 24px; padding: 12px; transition: 0.5s cubic-bezier(0.64, 0.35, 0.58, }

理想情况下，您可以将 CSS 放入此媒体查询中，以便它仅在 500 像素以下的屏幕上加载：@media (max-width: 500px).

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

table-当兄弟溢出时单元格未填充 div

table-cell not filling div when sibling has overflown

html

css

height

overflow