使Java小程序占用父元素的100％高度(Make a Java applet take 100% height of the parent element)

使Java小程序占用父元素的100％高度(Make a Java applet take 100% height of the parent element)

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

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

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

如果高度为90％ - 将有一个可见的10％（见图中的蓝色部分）

蓝行包含一个java小程序 - 我有问题使java小程序占用其父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; }

这是代码和CSS

请参阅applet div的蓝色部分 - 它的一部分：

I have this popup window that divides the screen to two rows, one fluid (blue) and the other have constant height of 64px (Green).

if the applet is set to 100% height - it will ignore its container and swollen 100 height of the popup

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

If the height is 90% - there will be a visible 10% (See blue part in the pic)

Blue row contains a java applet - I am having issues making the java applet take 100% height of its parent div. When there is no applet - there is no problem.

.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

See the blue part- its part of the applet div:

最满意答案

以下是几个选项：

您可以使用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。 视口百分比长度：'vw'，'vh'，'vmin'，'vmax'单位

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

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

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

..同样：

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

---

如果您对calc()浏览器支持感兴趣， 请参阅此处 。 此外，可以在此处找到对视口长度的支持。

Here are a couple options:

You can use calc() to set the height of the parent element to 100% minus the 64px at the bottom:

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

In doing so, you can now give the applet a height of 100% of the parent.

.applet { height: 100%; }

.. you could also just use calc() to set the height of the applet too:

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

.. or you could absolutely position the applet within the parent element:

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

---

It's worth pointing out that you can also use viewport percentage values:

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.

You can therefore use 100vh rather than 100%: calc(100vh - 64px):

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

.. likewise:

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

---

If you're interested in browser support for calc(), see here. Also, support for viewport lengths can be found here.