Question

在JSF中，我使用的是panelGrid，它相当于html中的表。如何设置高度= 100％？ width = 100％但不存在高度。感谢

Answer 1

首先，JSF在这里无关紧要。它现在都是关于它生成的HTML代码。在webbrowser中打开页面，右键单击并查看源代码。专注于那个 HTML源代码。这就是CSS（和JS）可以看到和应用的全部内容。

我认为你的意思是100％高度的全视口高度（“可见”高度）。现在，要在CSS中实现完整的视口高度，仅在所需的HTML元素本身上设置height: 100%是不够的。它将相对于其父元素，所有链都到<html＆gt;元件。所以，如果你基本上有一个：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>100% viewport height demo - FAIL</title>
        <style>
            .mytable { height: 100%; background: yellow; }
        </style>
    </head>
    <body>
        <table class="mytable"><tr><td>cell</td></tr></table>
    </body>
</html>

它将是<body>元素高度的100％。 <body>本身的高度又相对于<html>元素的高度。但这两个元素的高度不是100％。 Copy'n'paste'n'run它。你会看到，它没有覆盖整个视口。

如果您想要获得完整的视口高度，那么您还需要在height: 100%和<body>元素上应用<html>（您当然还需要重置边距））。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>100% viewport height demo - GOOD</title>
        <style>
            html, body { margin: 0; height: 100%; }
            .mytable { height: 100%; background: yellow; }
        </style>
    </head>
    <body>
        <table class="mytable"><tr><td>cell</td></tr></table>
    </body>
</html>

也可以在JSF上应用这些知识。 h:panelGrid只会呈现<table>元素。其styleClass将呈现为HTML class属性。

如何在JSF中设置h：panelGrid高度？

1 个答案: