最小高度不允许全高孩子答案

【问题标题】：min-height not allowing full height child最小高度不允许全高孩子
【发布时间】：2017-11-15 03:41:24
【问题描述】：

我有一个带有以下 css 类的 div（生成）

min-height: {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    min-height: -webkit-calc(100% - 60px) !important;
    min-height: -moz-calc(100% - 60px) !important;
    min-height: calc(100% - 60px) !important;
}

当我在里面添加一个高度为 100% 的 div 时，内容不会填充到父 div - 只有当父 div 设置了 height 属性而不是 min-height 时。

如果只设置了最小高度，我如何让子 div 扩展到父 div 的完整大小？

<div class="min-height">
    <div class="full-height">not much content<div> 
</div>

【问题讨论】：

标签： html css

【解决方案1】：

当你在类似的东西上声明一个高度时，它的父级需要指定一个高度，依此类推。

（而且你的 CSS 中有很多语法错误）

例如。为 HTML 和 Body 元素添加高度。还要给父母一个高度。现在您的孩子可以拥有 100% 的容器高度。

body, html {
 height: 100%;
}

.min-height {
    margin-top: 30px;
    margin-bottom: 30px;
    height: 100%;
    min-height: calc(100% - 60px);
    background: gray;
    padding: 10px;
}

.full-height {
  height: 100%;
  background: yellow;
}

<div class="min-height">
    <div class="full-height">not much content<div> 
</div>

【讨论】：

【解决方案2】：

最小高度类也应该有一个高度。然后为全高类添加以下规则：

.full-height {
  display: block;
  height: 100%;
}

【讨论】：