1

我在borderContainer 中有一个titlePane，我试图让titlePane 在其中有一个滚动条。当您拖动拆分器以使 titlePane 更小时，滚动条会出现，但滚动条会从底部滑落（看起来它与 titlePane 标题的偏移高度相同）。有没有办法让整个滚动条都在视图中？

<body class="claro">
<div id="container" data-dojo-type="dijit.layout.BorderContainer" >
    <div id="center" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', layoutPriority: 1">
            center
        </div>
        <div id="bottom" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom', splitter: 'true'">
             <div class="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'tilepane'">
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
            </div>
    </div> 
 </div>    
</body>

​</p>

这是CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#container {
    width: 100%;
    height: 100%;
}
#bottom {
     padding: 0;
     height: 100px;
}    
.claro .dijitTitlePaneContentOuter {
    height:100%;
    overflow:auto;
}

这是一个工作示例http://jsfiddle.net/mMTdU/1/

4

1 回答 1

2

我能够解决这个问题，所以希望如果其他人遇到类似问题会有所帮助。您可以轻松地扩展该类并覆盖由borderContainer 调用的resize 函数。

dojo.addOnLoad(init);

function init() {
    dojo.safeMixin(dijit.byId("titlePane"), {
        resize: function() {
            this.inherited(arguments);

            this.hideNode.style.height = (dojo.marginBox(this.domNode).h - dojo.marginBox(this.titleBarNode).h).toString() + "px";
        }
    });

    // set initial height
    var titlePane = dijit.byId("titlePane");
    titlePane.hideNode.style.height = (dojo.marginBox(titlePane.domNode).h - dojo.marginBox(titlePane.titleBarNode).h).toString() + "px";
}​

我们需要计算和设置 titlePane 中内容 div 的高度，而不是仅仅给它一个 100% 的高度。您可以在更新的 jsfiddle 链接http://jsfiddle.net/mMTdU/2/中看到它正在工作

于 2012-10-23T04:35:33.720 回答