使Java小程序占用父元素的100％高度

Question

我有这个弹出窗口，将屏幕划分为两行，一个流体（蓝色），另一个具有64px的恒定高度（绿色）。

如果小程序设置为100％高度 - 它将忽略其容器并弹出100高度的弹出窗口

<applet id="jumpLoaderApplet" width="100%" height="90%"></applet>

如果高度为90％ - 将有一个可见的10％（见图中的蓝色部分）

蓝行包含一个java小程序 - 我有问题使java小程序占用其父div的100％高度。 当没有applet时 - 没有问题。

.content {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    bottom:64px;
    background:blue;
}
.footer {
    position:absolute;
    width:100%;
    height:64px;
    bottom:0;
    background:green;
}

这是代码和CSS

看到蓝色部分 - 它是applet div的一部分：

Answer 1

以下是几个选项：

您可以使用calc()将父元素的高度设置为100%减去底部的64px ：

.content {
    position: absolute;
    width: 100%;
    height: calc(100% - 64px);
    top: 0;
    background: blue;
}

这样，您现在可以将applet的高度设置为父级的100% 。

.applet {
    height: 100%;
}

..你也可以使用calc()来设置applet的高度：

.applet {
    height: calc(100% - 64px);
}

..或者你可以绝对将applet放在父元素中：

.content {
    position: absolute;
    width: 100%;
    height: calc(100% - 64px);
    top: 0;
}
.applet {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

---

值得指出的是，您还可以使用视口百分比值：

5.1.2。 视口百分比长度：'vw'，'vh'，'vmin'，'vmax'单位

视口百分比长度相对于初始包含块的大小。 当初始包含块的高度或宽度改变时，它们相应地缩放。

因此，你可以使用100vh而不是100% ： calc(100vh - 64px) ：

.content {
    position: absolute;
    width: 100%;
    height: calc(100vh - 64px);
    top: 0;
    background: blue;
}

..同样：

.applet {
    height: calc(100vh - 64px);
}

---

如果您对calc()浏览器支持感兴趣， 请参阅此处 。 此外，可以在此处找到对视口长度的支持。