浏览器以奇怪的方式呈现

Question

首先，让我给你一些信息。我正在开发一个Web应用程序：

• Netbeans 7.2.1
• JSF-2 Mojarra 2.1.1
• Primefaces 3.4.2
• Chrome / Firefox

在其中一个页面（实际上是索引页面）中，有一个面板（p：panel），它包含一个数据网格（p：dataGrid）。好吧，当数据网格有一些元素（超过两个）时，整个页面以一种非常奇怪的方式呈现。最好的将向您展示一个特殊的屏幕截图。

如您所见，出现两个滚动条（水平和垂直）。我认为这是一个代码问题，如果不是因为只是访问浏览器的开发人员工具页面重新渲染并且滚动条消失。结果如下：

Chrome和Firefox浏览器都具有相同的行为。我不知道如何面对这个问题。我甚至不知道我能给你什么样的信息，因为我不知道它是在我的代码中的问题，它是一个Primefaces错误或什么。 你们有没有遇到任何类似的问题？我想你的任何建议。 提前谢谢。

编辑 - 这是一个非常简化的视图结构：

<p:layoutUnit position="west" size="66%">            
    <p:layoutUnit position="center">
        <h:inputHidden .../>
        <h:inputHidden .../>
        <p:panel style="height: 95%" styleClass="transparent">   
            <p:dataGrid ...>
                <h:form>
                    <p:commandButton style="width: 100%" ...>
                        <f:setPropertyActionListener ... />
                    </p:commandButton>
                </h:form>
            </p:dataGrid> 
        </p:panel>
    </p:layoutUnit>

    <p:layoutUnit position="south" size="33%">
        <p:panel style="height: 90%" styleClass="transparent">
        </p:panel>
    </p:layoutUnit>
</p:layoutUnit>

<p:layoutUnit position="center" size="33%">
    <p:layoutUnit position="center">
        <p:panel>
            <p:panel id="map"/>
        </p:panel>
    </p:layoutUnit>

    <p:layoutUnit position="south" size="46%">
        <p:commandButton .../>
    </p:layoutUnit>
</p:layoutUnit>