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

Question

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

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

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

如果高度是 90% - 会有可见的 10%（见图中蓝色部分）

蓝色行包含一个 java 小程序 - 我在使 java 小程序占用其父级 div 的 100% 高度时遇到问题。当没有小程序时-没有问题。

.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

查看蓝色部分-它是小程序的一部分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

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

因此您可以使用 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. Also, support for viewport lengths can be found here.

的浏览器支持感兴趣

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

Make a Java applet take 100% height of the parent element

html

css

java

applet