要使div s（或任何类型的Node）可调整大小，您需要将plug()和Plugin.Resize类Node。

没有必要使用Overlay。相反，您可以使用YUI.one()将div获取为Node。然后您可以在Resize插件中使用plug()。这样做的javascript看起来像这样：

YUI().use('resize-plugin', 'node', function (Y) {
   Y.one('#filter').plug(Y.Plugin.Resize);
   Y.one('#graph').plug(Y.Plugin.Resize);
   Y.one('#details').plug(Y.Plugin.Resize);
});

编辑：

然而，要制作一个类似于您在jsFiddle中发布的jQuery的布局有点困难。我的第一个建议是使用jQuery。jQuery解决方案似乎很简单，经过深思熟虑，它可以与YUI/AlloyUI在同一页面上共存，所以对布局使用jQuery，对其他任何内容使用YUI/Alloy UI。

如果你绝对不能使用jQuery，你可以这样做：

HTML

<div id="layout">
    <div id="graph"></div>
    <div id="details"></div>
</div>

CSS

#layout {
    position: absolute;
    right: 0;
    height: 300px;
    width: 300px;
}
#graph {
    position: absolute;
    height: 200px;
    width: 100%;
    background: orange;
}
#details {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: navy;
}

javascript

YUI().use('resize-constrain', 'resize-plugin', 'node', function (Y) {
    var graphNode = Y.one('#graph');
    var detailsNode = Y.one('#details');
    graphNode.plug(Y.Plugin.Resize, {
        handles: ['b']
    });
    graphNode.resize.plug(Y.Plugin.ResizeConstrained, {
        constrain: '#layout'
    });
    graphNode.resize.on('resize:resize', function (event) {
        var graphHeight = parseInt(graphNode.getStyle('height'), 10);
        detailsNode.setStyle('height', (300 - graphHeight) + 'px');
    });
});

外植体：

1. 用Resize插件插入一个Node，使其可调整大小
2. 用ResizeConstrianed插件插入Resize插件，以便只允许在外部div的宽度内调整大小

3. 关于resize:resize事件：

   • 获取graph div的高度作为Integer
   • 将其从总高度中减去，以确定details div的新高度
   • 将details div设置为新高度

为了完整起见，我包含了一个可运行的示例，它有一个3面板可调整大小的布局，很像jQuery示例：

YUI().use('resize-constrain', 'resize-plugin', 'node', function (Y) {
    var graphNode = Y.one('#graph');
    var detailsNode = Y.one('#details');
    graphNode.plug(Y.Plugin.Resize, {
        handles: ['b']
    });
    graphNode.resize.plug(Y.Plugin.ResizeConstrained, {
        constrain: '#rightPanel'
    });
    graphNode.resize.on('resize:resize', function (event) {
        var graphHeight = parseInt(graphNode.getStyle('height'), 10);
        detailsNode.setStyle('height', (300 - graphHeight) + 'px');
    });
    var filterNode = Y.one('#filter');
    var rightPanelNode = Y.one('#rightPanel');
    filterNode.plug(Y.Plugin.Resize, {
        handles: ['r']
    });
    filterNode.resize.plug(Y.Plugin.ResizeConstrained, {
        constrain: '#mainLayout'
    });
    filterNode.resize.on('resize:resize', function (event) {
        var filterWidth = parseInt(filterNode.getStyle('width'), 10);
        var rightPanelResizedWidth = (600 - filterWidth) + 'px';
        rightPanelNode.setStyle('width', rightPanelResizedWidth);
        // YUI sets the height using the `style` attribute, so it must be overwritten using `setStyle()` becuase the CSS has been overriden.
        graphNode.setStyle('width', rightPanelResizedWidth);
    });
});

#mainLayout {
    position: absolute;
    height: 300px;
    width: 600px;
}
#rightPanel {
    position: absolute;
    right: 0;
    height: 300px;
    width: 300px;
}
#graph {
    position: absolute;
    height: 200px;
    width: 100%;
    background: orange;
}
#details {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: navy;
}
#filter {
    position: absolute;
    left: 0;
    height: 100%;
    width: 300px;
    background: darkcyan;
}

<script src="https://cdn.rawgit.com/stiemannkj1/0214fdc4cccaa77d6e504320cf70a571/raw/63d260364730fb067f103c00862c7e65685256df/yui-3.18.1_build_yui_yui-min.js"></script>
<div id="mainLayout">
    <div id="rightPanel">
        <div id="graph"></div>
        <div id="details"></div>
    </div>
    <div id="filter"></div>
</div>