Чтобы изменить размер divs (или любого типа Node), необходимо plug() класс Plugin.Resize в свой Node.

Нет необходимости использовать Overlay. Вместо этого вы можете получить divs как Node, используя YUI.one(). Затем вы можете plug() в плагине Resize. 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);
});

Редактировать:

Однако сделать макет, похожий на макет jQuery, который вы разместили в этом jsFiddle, немного сложно. приказ. Моей первой рекомендацией будет использовать jQuery. Решение jQuery кажется простым и хорошо продуманным, и оно может сосуществовать с YUI/AlloyUI на одной странице, поэтому используйте jQuery для макета и YUI/AlloyUI для всего остального.

Если вам абсолютно не нужно использовать 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. Подключите один Node к плагину Resize, чтобы изменить его размер.
2. Подключите этот плагин Resize к плагину ResizeConstrianed, чтобы разрешить изменение размера в пределах ширины внешнего div.

3. На мероприятии resize:resize:

   • Get the height of the graph div as an 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>