Home/ Questions/Q 883045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T12:31:21+00:00

In JSF, I am using panelGrid which is equivalent to table in html. How

  • 0

In JSF, I am using panelGrid which is equivalent to table in html. How to set height=100% in it? width=100% exists but not height.
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To start, JSF is irrelevant here. It’s now all about its generated HTML code. Open page in webbrowser, rightclick and view source. Concentrate you on that HTML source. That’s all what CSS (and JS) can see and apply.

    I assume that you mean with 100% height the full viewport height (the “visible” height). Now, to achieve full viewport height in CSS, only setting a height: 100% on the desired HTML element itself is not sufficient. It will be relative to its parent element, all the chain up to the <html> element. So if you basically have a:

    <!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>

    It will be 100% of the height of the <body> element. The height of the <body> itself is in turn relative to the height of the <html> element. But the both elements doesn’t have a height of 100%. Copy’n’paste’n’run it. You’ll see, it does not cover the full viewport.

    If you want to achieve a full viewport height, then you need to apply height: 100% on both the <body> and <html> elements as well (you of course also need to reset the margins).

    <!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>

    Apply this knowledge on JSF as well. The h:panelGrid just renders a <table> element. Its styleClass will be rendered as HTML class attribute.

    • 0