Question

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

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>

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

最小高度不允许全高度儿童

2 个答案: