layout - DOJO ContentPane 内部 DIV 高度随 ContentPane 调整大小而变化

Question

我正在使用 DOJO 的 ContentPane 模块。我在其中一个 Pane 中有一个 div 元素，我需要给它一定的高度 - 比 ContentPane 的高度小 100 像素，以便 div当您通过拖动分隔符更改 ContentPane 大小时， 会动态更改其高度。我是 Dojo 的新手，如果有人能帮助我解决这个问题，我会很高兴。

谢谢。

Answer 1

我认为最好的解决方案是通过嵌套的 BorderContainers 和正确设置的 splitters，因为这样 dijit/layout 将负责调整大小和您无需编写任何 JavaScript 代码，您的布局将仅基于 CSS。

解释起来有点麻烦，所以我在 jsFiddle 为您创建了一个工作示例:http://jsfiddle.net/phusick/Ayg8F/ + 图表:

注意:不要忘记为 html、body 和顶部 BorderContainer 设置 height: 100% .

此解决方案的缺点是您必须将普通的 div 替换为 ContentPanes。如果您不想或不能，您可以使用 dojo/aspect 并连接到 BorderContainer 或 ContentPane resize 方法并在尺寸发生变化时手动调整 div 的大小:

require([
    "dojo/ready",
    "dojo/aspect",
    "dijit/registry",
    "dijit/layout/ContentPane",
    "dijit/layout/BorderContainer"
], function(
    ready,
    aspect,
    registry
) {

    ready(function() {
        var bc = registry.byId("borderContainer1");
        aspect.after(bc, "resize", function() {
            // calculate and set <div> size here
            console.log("resize divs");
        });
    });  
});​