如何使用WinJS將分割視圖窗格元素與底部對齊

所以我一直在爭取相當長一段時間來弄清楚這一點。應該有一些明顯的解決辦法，我明顯缺少。請注意，我要找出正確的解決方案。是的，我試過{position: absolute; bottom:0}，但看起來很討厭。如何使用WinJS將分割視圖窗格元素與底部對齊

無論如何，我使用WinJS（版本4.3.0）來創建一個分割視圖。一切看起來都很好，但我真的很想將其中一個菜單項（或將視圖命令拆分爲左窗格中的項目）放在最下面。所以如果你去http://winjs.azurewebsites.net/#splitview我想把「設置」項目放在最下面。像這樣的東西

如果你看看HTML，它應該相當容易（我猜）。原始的HTML：

<!-- {Original HTML} Pane area --> 
<div> 
    <div class="header"> 
     <button 
      class="win-splitviewpanetoggle" 
      data-win-control="WinJS.UI.SplitViewPaneToggle" 
      data-win-options="{ splitView: select('.splitView') }" 
     ></button> 
     <div class="title">SplitView Pane area</div> 
    </div> 

    <div class="nav-commands"> 
     <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div> 
     <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div> 
     <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div> 
    </div> 
</div>

我的解決方案可能是什麼樣子的猜測：

<!-- {my guess for the solution} Pane area --> 
<div> 
    <div class="header"> 
     <button 
      class="win-splitviewpanetoggle" 
      data-win-control="WinJS.UI.SplitViewPaneToggle" 
      data-win-options="{ splitView: select('.splitView') }" 
     ></button> 
     <div class="title">SplitView Pane area</div> 
    </div> 

    <div class="nav-commands"> 
     <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div> 
     <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div> 
    </div> 

    <!-- now I need to position this to the bottom... --> 
    <div class="nav-commands"> 
     <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div> 
    </div> 
</div>

剛剛創建類資產淨值的命令一個新的div，將設置DIV那裏，定位導航命令至底部。

但是，我無法做到這一點。我嘗試了所有類型的彈性盒選項（align-self，align-items，證明內容），但似乎沒有任何作用。有人有建議嗎？

謝謝！

來源

2015-09-10 John Louros

我有同樣的問題，並找出它。對我而言，工作是將窗格設置爲flexbox。 nav-command項目的容器有display: flex;和flex-direction: column;樣式。它還需要指定其高度：一種方法是使用height: 100vh;風格。

倒數第二個命令的容器的樣式爲flex: 1，而其他容器的默認值爲flex: none。這將使下一個到最後一個項目的集裝箱貪婪採取儘可能多的空間可能。不幸的是，你不應該包含樣式命令本身的元素。我結束了一個非常大的亮點（笑）。

這是基於我的應用程序的代碼我的解決方案。我窗格區域進行了標記，類似於：

<body id="app" class="win-type-body" data-win-control="WinJS.UI.SplitView"> 
    <header> 
     <menu> 
      <li> 
       <button data-win-control="WinJS.UI.SplitViewPaneToggle" 
       data-win-options="{ splitView: select('#app') }"></button> 
      </li> 
      <li> 
       <div data-win-control="WinJS.UI.SplitViewCommand" 
       data-win-options="{ label: 'Option 1', icon: 'placeholder'}"></div> 
      </li> 
      <li> 
       <div data-win-control="WinJS.UI.SplitViewCommand" 
       data-win-options="{ label: 'Option 2', icon: 'placeholder'}"></div> 
      </li> 
      <li> 
       <div data-win-control="WinJS.UI.SplitViewCommand" 
       data-win-options="{ label: 'Option 3', icon: 'placeholder'}"></div> 
      </li> 
      <li> 
       <div data-win-control="WinJS.UI.SplitViewCommand" 
       data-win-options="{ label: 'Settings', icon: 'settings'}"></div> 
      </li> 
     </menu> 
    </header> 
    <main> ... </main> 
</body>

爲我工作的CSS是類似於：

body { 
    height: 100%; 
} 
header { 
    display: block; 
    white-space: nowrap; 
} 
header > menu { 
    display: flex; 
    height: 100vh; 
    flex-direction: column; 
    margin: 0; padding: 0; 
} 
header > menu > li { 
    display: block; 
    margin: 0; padding: 0; 
    list-stye-type: none; 
} 
header > menu > li:nth-last-child(2) { 
    flex: 1; /* Put Settings on the bottom */ 
} 
.win-splitview-pane-closed .win-splitviewcommand-label { 
    /* Make sure pane content doesn't scroll */ 
    /* if SplitViewCommand label receives focus while pane is closed. */ 
    visibility: hidden; 
}

我希望幫助！至少它應該幫助別人誰後的問題，而無意中發現各地的網絡使用Google，像我這樣的......

來源

2015-09-27 18:45:14 Jimmy

作品完美，感謝吉米！ –

如何使用WinJS將分割視圖窗格元素與底部對齊

回答

相關問題