如何在 JSF 中设置 h:panelGrid 高度？答案

【问题标题】：How to set h:panelGrid height in JSF?如何在 JSF 中设置 h:panelGrid 高度？
【发布时间】：2010-06-23 08:14:24
【问题描述】：

在 JSF 中，我使用的 panelGrid 相当于 html 中的表格。如何在其中设置 height=100%？ width=100% 存在但不存在高度。谢谢

【问题讨论】：

【解决方案1】：

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

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

<!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%。复制'n'粘贴'n'运行它。你会看到，它并没有覆盖整个视口。

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

<!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 属性。

【讨论】：