我有一个弹出窗口,它将屏幕分为两行,一行是流体(蓝色),另一行具有恒定的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的蓝色部分：

解决方法:

以下是几个选项：

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

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

这样,您现在可以将小程序的高度设置为父级的100％.

.applet {
    height: 100%;
}

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

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

..或您可以将小程序绝对定位在父元素内：

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

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

07001

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的支持感兴趣.此外,对视口长度的支持可以为found here.