时间戳

首页 > 解决方案 > 如何使 100% 表格高度与最小高度父级一起使用

css - 如何使 100% 表格高度与最小高度父级一起使用

问题描述

似乎是一个简单的问题，但我无法将内部 div 设置为与最小高度 70vh 设置的父 div 的 100% 高度。我希望里面的表格是 100% 的高度和垂直对齐的内容。如果我将父母身高设置为 70vh，它会起作用，但这不允许更多内容。下面的小提琴：

https://jsfiddle.net/RustyBadRobot/zgesx50L/8/

.hero-row {
  position: relative;
  z-index: 10;
  background: #f8f9fa;
  min-height: 70vh;
  height: 70vh; /* This makes it work but if content goes over fails to expand */
  padding-top: 0;
  padding-bottom: 0;
}

.centrize {
  position: relative;
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}

标签： csstwitter-bootstrap

解决方案

可以通过让元素的子元素继承相同的 来解决这个问题min-height: 70vh。因此，添加min-height: inherit到第一个子元素，它应该按预期工作。

.centrize {
  position: relative;
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
  min-height: inherit;
}

推荐阅读