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

Question

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

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

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

如果高度为 90% - 将有可见的 10%(见图中蓝色部分)

蓝色行包含一个 java applet - 我在使 java applet 占据其父 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

看蓝色部分——它是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;
}

---

值得指出的是，您还可以使用视口(viewport)百分比值:

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 .此外，对视口(viewport)长度的支持可以是 found here .