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

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;
}

在这两个布局单元之间我看到了一个空白。请帮我删除它:)

Answer 1

我们最近升级到了 JSF 2.3 版。之后，这个未知的空间问题出现在我们使用 Primefaces 布局的界面中。在我的场景中，此问题会自动针对以下选项得到修复:

1. 在不清除缓存 (Ctrl+F5) 的情况下刷新页面 (F5)。
2. 调整浏览器窗口大小时。

我尝试了很多使用 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: 最后这个问题通过内部样式而不是外部样式来解决。原因是因为外部样式表中的样式在最初的渲染中没有应用。