Primefaces CSS Header 太大了

Question

我有一个带有 facelets 的 primefaces 页面，一切正常。在 header.xhtml 处，代码是：

    <div class="title ui-widget-header ui-corner-all" style="display: table;overflow: hidden;width:100%">
        <div style="display: table-cell; vertical-align: middle">
            <h:graphicImage library="images" name="apo48.png" />
        <font size="6">Usermanagement und Selfcare</font>
        </div>
        <div style="display: table-cell;vertical-align: middle;text-align:right;">
            <h:outputText value="Willkommen #{login.user}"/><br/>
            <h:commandLink action="#{login.logout}" value="Logout"/>
        </div>
    </div>

所以 header 看起来也不错，但是 header 下面有一个垂直滚动条。似乎 header 大了一到两个像素。但为什么会这样，我该怎么办？

编辑好吧，一个完整的例子：我有 layout.xhtml

<ui:debug hotkey="x" rendered="#{facesContext.application.projectStage == 'Development'}" />
<p:layout fullPage="true">
    <p:layoutUnit position="north" style="border: 0;">
        <ui:include src="../header/header.xhtml"/>
    </p:layoutUnit>
    <p:layoutUnit position="west" style="border: 0;">
        <ui:include src="../menu/navigation.xhtml"/>
    </p:layoutUnit>
    <p:layoutUnit position="center" style="border: 0;">
        <ui:insert name="content"/>
    </p:layoutUnit>
</p:layout>

随着CSS

    .ui-widget, .ui-widget .ui-widget {
    font-size: 95% !important;
    }
    .ui-datatable tbody td.wrap {
    white-space: normal;
    }
    .unresizable {
    resize: none;
    }

在north layoutunit中就是上面提到的代码。

Answer 1

有两个单位可用于设置相对于视口大小（window 大小）的宽度和高度 vh 和 vw。要设置页眉的高度和宽度，您可以这样做

.title{
  height: 20vh;
  width: 90vw;
}

此代码会将 .title 的高度设置为 window 高度的 20%。或者你可以轻松设置

body{
  height: 100vh;
  width: 100vw;
}

另请参阅：

https://developer.mozilla.org/en-US/docs/Web/CSS/length

Primefaces CSS Header 太大了

Primefaces CSS Header too big

html

css

jsf

primefaces

jsf-2