Question

我无法以％为单位设置div高度。但是它在px中工作;

html, body {
 height: 100%;
}

.parent {
    position: absolute;
}

.child {
 height: 300px;   <<--- Want this to be in %
    overflow: auto;
    position: absolute;
}

.childsChild {
   height: 100%;
   position: relative;
}

我的html结构是

Div -> Parent
  Div -> Child
    Div -> childsChild

每当我尝试使用％而不是服用时。任何人都可以帮我解决这个问题吗？

Answer 1

因此，在您的代码中，您的父级div没有高度。在父母中，您有一个height: 30%的孩子。如何让孩子width: 30%出现？ 30%的0是...... 0.

你也应该为它们定义一个宽度（因为你有position: absolute;），更多关于这个here。

HTML：

<div class="parent">
    <div class="child">
        <div class="childsChild"></div>
    </div>
</div>

CSS：

html, body {
    height: 100%;
}
.parent {
    position: absolute;
    background: red;
    height: 100%;
    width: 100%;
}
.child {
    height: 300px;
    width: 100%;
    overflow: auto;
    position: absolute;
    background: blue;
}
.childsChild {
    height: 30%;
    width: 100%;
    position: relative;
    background: green;
}

DEMO HERE

Answer 2

由于 .child css类包含绝对定位，因此无法理解％中的高度。

在这种情况下，您必须提供固定的高度。

％在定位不是绝对的时候起作用，或者你的容器本身包含在另一个容器中，这个容器可能是绝对的，但也有一些固定的值，即300px或somthing

Answer 3

把这样的百分比放在：

height:100vh;

百分比不适用于CSS

3 个答案:

HTML：

CSS：