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添加.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置于此媒体查询中，以便仅在500px以下的屏幕上加载：@media (max-width: 500px).

Codepen：http://codepen.io/kristywessel/pen/KzzKeP

当兄弟姐妹溢出时，表格单元格不填充div

1 个答案: