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

【问题标题】：Make a Java applet take 100% height of the parent element使 Java 小程序占用父元素的 100% 高度
【发布时间】：2015-04-03 12:24:35
【问题描述】：

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

如果小程序设置为 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 的一部分：

【问题讨论】：

这个div的容器是什么？有position: relative;吗？

标签： java html css applet

【解决方案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。

【讨论】：