layout - DOJO ContentPane 内部 DIV 高度在 ContentPane 调整大小时发生变化

Question

我正在使用 DOJO 的ContentPane模块。我div在其中一个窗格中有一个元素，我需要给它一个特定的高度 - 比它的高度小 100 像素，ContentPane以便在您通过拖动拆分器div更改大小时动态更改其高度。ContentPane我是 Dojo 的新手，如果有人可以帮助我，我会很高兴。

谢谢。

Answer 1

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

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

注意：不要忘记设置height: 100%为html,body和顶部BorderContainer。

此解决方案的缺点是您必须将 plain 替换divs为ContentPanes. 如果您不想或不能，您可以在大小更改时使用dojo/aspect并连接BorderContainer或手动ContentPane resize调整大小：divs

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");
        });
    });  
});​