使WinJS.UI.Flyout向上擴展

Question

我有一個WinJS.UI.Flyout，當內容添加到可見時，我想向上擴展。彈出的錨點位於屏幕的底部。如果我打電話flyout.show(anchor, 'top');，它首先看起來是正確的，但是當添加內容時，它會在屏幕底部展開。如果我打電話給flyout.show(anchor, 'bottom');它向上擴展，但它也覆蓋了我不想要的錨元素。

Answer 1

這可以通過爲彈出窗口使用-ms-flexbox顯示並將其內容打包到最後來完成。

彈出背景可以設置爲透明;它的大小可以設置爲最大可能;這樣它就可以作爲一個外部容器，將其內容與最終對齊。可擴展的內容被放置在另一個div 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; 
}