使WinJS.UI.Flyout向上扩展

Question

我有一个WinJS.UI.Flyout，我想有一个向上扩展时，内容被添加到它，而它是可见的。弹出型按钮的锚点位于屏幕底部。如果我调用flyout.show(anchor, 'top');，它一开始会正确显示，但当添加内容时，它会在屏幕底部展开。如果我调用flyout.show(anchor, 'bottom');，它会向上扩展，但它也覆盖了锚元素，这是我不想要的。

Answer 1

这可以通过对弹出按钮使用-ms-flexbox display并将其内容打包到末尾来完成。

弹出式背景可以设置为透明；它的大小可以设置为最大可能；这样，它就可以作为一个外部容器，将其内容与末尾对齐。可扩展的内容放在另一个flyout-content中，背景为白色。

<div data-win-control="WinJS.UI.Flyout" id="flyout">
    <div class="flyout-content">
        expandable content here
        expandable content here
        expandable content here
        expandable content here
    </div>
</div>

css：

#flyout
{
    background-color: transparent;
    border: 0;
    display: -ms-flexbox;
    -ms-flex-pack: end;
    -ms-flex-direction: column;
    height: 400px;
}

.flyout-content
{
    padding: 20px;
    background-color: white;
}