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

【问题标题】：DOJO ContentPane inner DIV height changing on ContentPane resizeDOJO ContentPane 内部 DIV 高度在 ContentPane 调整大小时发生变化
【发布时间】：2012-06-05 15:42:18
【问题描述】：

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

谢谢。

【问题讨论】：

标签： layout dojo dijit.layout contentpane

【解决方案1】：

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

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

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

此解决方案的缺点是您必须将普通的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");
        });
    });  
});

【讨论】：