所以我已经奋斗了很长一段时间来解决这个问题。应该有一些我明显缺少的明显解决方案。请注意，我要找出正确的解决方案。是的，我已经尝试过 {position:absolute;底部:0}但这看起来很糟糕。
无论如何，我正在使用 WinJS(版本 4.3.0)来创建分割 View 。一切看起来都很好，但我真的很喜欢将菜单项之一(或 Split View命令，左 Pane 中的元素)定位到底部。因此，如果您转到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>
只需创建一个带有类 nav-commands 的新 div，将设置 div 移到那里并将 nav-command 放置到底部。
但是，我无法实现这一点。我尝试了各种 flexbox 选项( self 对齐、元素对齐、内容对齐)，但似乎没有任何效果。有人有建议吗？
谢谢!
最佳答案
我也遇到了同样的问题并解决了。对我有用的是将 Pane 设计为 flex 盒。 nav-command 项的容器具有 display: flex; 和 flex-direction: column; 样式。它还需要指定其高度:一种方法是使用 height: 100vh; 样式。
倒数第二个命令的容器具有样式 flex: 1，而其他命令的容器具有默认的 flex: none。这将使倒数第二个元素的容器贪婪地占用尽可能多的空间。不幸的是，您不应该为包含命令本身的元素设置样式。我最终得到了一个非常大的亮点(笑)。
这是我的基于我的应用程序代码的解决方案。我的 Pane 区域标记类似于:
<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;
}
希望有帮助!至少它应该可以帮助那些在网络上搜索时偶然发现这个问题的人，比如我自己......
关于css - 如何使用 WinJS 将分割 View Pane 元素与底部对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32503333/