代码之家 › 专栏 › 技术社区 › Prabhat

如何在JSF中设置h:panelgrid高度?

jsf css html

1

Prabhat · 技术社区 · 15 年前

在JSF中,我使用的是panelgrid,它相当于HTML中的表。How to set height=100% in it? 宽度=100%存在,但不存在高度。谢谢

1 回复 | 直到 15 年前

1

4

BalusC 15 年前

首先,JSF在这里是不相关的。现在一切都是关于它生成的HTML代码。在WebBrowser中打开页面,右键单击并查看源代码。集中你的注意力那个 HTML源代码。这就是CSS(和JS)所能看到和应用的全部内容。

我假设你的意思是100%高度的全视区高度(“可见”高度)。现在,要在CSS中实现全视区高度,只需设置 height: 100% 对于所需的HTML元素本身是不够的。它将与其父元素相关,所有到 <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> 元素。的高度 <身体& 它本身与 <html> 元素。但这两个元素的高度不是100%。复制粘贴运行。您将看到,它不覆盖整个视区。

如果要获得完整的视区高度,则需要应用 身高:100% 两者都 <身体& 和 <HTML& GT; 元素也一样(当然您还需要重置页边距)。

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