Question

我在Primefaces的顶部布局下面有一条白线我无法删除。你能帮助我吗？这是我的代码：

<h:body>
    <p:layout fullPage="true">
        <p:layoutUnit position="north" size="80" styleClass="top">
        some content here
        </p:layoutUnit>
        <p:layoutUnit position="center" styleClass="contentStyle">
            <ui:insert name="content"/>
        </p:layoutUnit>
        </p:layout>
</h:body>

和我的（外部）样式表是：

.top {
background: #3a87ad; 
}

.contentStyle {
background: #9EADC8;
}

在这两个layoutUnits之间，我看到一个空白区域。请帮我删除它：）

Answer 1

我们最近已升级到JSF 2.3版。此后，在我们使用Primefaces布局的界面中出现了这个未知的空间问题。在我的情况下，以下问题会自动得到解决：

刷新页面（F5）而不清除缓存（Ctrl + F5）时。
调整浏览器窗口大小时。

我尝试了许多使用JavaScript将窗口调整为相同大小的解决方案，但是Chrome和Opera最新版本不支持该功能。因此，我找到了上述第一个选项的解决方案。您只能使用JavaScript刷新页面一次，如下所述：

window.onload = function() {
    if(!window.location.hash) {
        window.location = window.location + '#home';
        window.location.reload();
    }
}

修改1： 如果一次重新加载还不够，请尝试以下代码

window.onload = function() {
    if(!window.location.hash) {
        window.location = window.location + '#home';
        window.location.reload();
    } else if (window.location.hash == '#home') {
        window.location = window.location + '#home2';
        window.location.reload();
    }
}

修改2： 最后，通过内部样式而不是外部样式解决了此问题。原因是因为外部样式表中的样式没有在最初的渲染中应用。

Answer 2

即使很难你们中的一些人可能会认为这篇文章是重复的，我也在PrimeFaces 5 + 上遇到了类似的问题。

为了解决这个问题，我必须为每个 layoutUnit
设置可折叠和装订线属性
.ui-layout-unit, ui-layout-unit, ui-widget, ui-widget-content, ui-corner-all, ui-layout-north, ui-layout-pane, ui-layout-pane-north { border: none; padding:0; }

使用CSS将以下每个元素的填充设置为0。

justify-content: space-between

提示：检查您的页面，翻转空白区域并检查扩展超出您需求的类。

Answer 3

.top {
    background: #3a87ad; 
}

.contentStyle {
    background: #9EADC8;
}

添加

float:left; width 100%; or white space:normal

我认为它有效

Answer 4

你可以尝试添加！important;

如下代码

.top {
background: #3a87ad !important; 
}

.contentStyle {
background: #9EADC8 !important;
}

如何在primefaces中隐藏北方布局下的空白区域？

4 个答案: