Для начала JSF здесь не имеет значения.Теперь все о сгенерированном HTML-коде.Откройте страницу в браузере, щелкните правой кнопкой мыши и просмотрите источник.Сконцентрируйте вас на этом источнике 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>
, то это будет 100% высоты элемента <body>.Высота самого <body> в свою очередь относительно высоты элемента <html>.Но оба элемента не имеют высоту 100%.Скопируйте и запустите его.Вы увидите, что он не охватывает весь видовой экран.
Если вы хотите достичь полной высоты видового экрана, тогда вам нужно применить 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.