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

Question

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

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

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

如果高度为90％ - 可见10％（参见图片中的蓝色部分）

蓝色行包含一个java applet - 我遇到的问题是java applet占用其父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;
}

Here is the code along with the 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. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

     

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

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

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

..同样：

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

---

如果您对calc()，see here的浏览器支持感兴趣。此外，对视口长度的支持可以是found here。