我有一个带有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>
标题看起来也不错,但标题下方有一个垂直滚动条。标题似乎大了一两个像素。但为什么会这样,我能做什么呢?
编辑
好的,一个完整的例子:我有 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布局单元中就是上面提到的代码。
最佳答案
有两个单位可用于设置相对于视口(viewport)大小(窗口大小)vh 和 vw 的宽度和高度。要设置标题的高度和宽度,您可以这样做
.title{
height: 20vh;
width: 90vw;
}
此代码会将 .title 的高度设置为窗口高度的 20%。 或者您可以轻松设置
body{
height: 100vh;
width: 100vw;
}
另请参阅:
关于html - Primefaces CSS header 太大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32776373/