gpt4 book ai didi

listview - Windows 8 ListView 不会以 100% 高度呈现

转载 作者:行者123 更新时间:2023-12-02 03:50:48 25 4
gpt4 key购买 nike

所以,我正在制作一个可视化页面,它需要一个分组的 ListView,它可以可变地增长和收缩,可以添加或删除组。 Here's我希望它看起来像什么(供引用)

各种 ListView 项目(混合)很好地分组,有些超出了页面。这是 Windows 应用商店应用中非常常见的设计模式。

现在,这是我的问题:如果 heightwidth 属性设置为确定的像素数,我只能让我的 ListView 正确显示,例如:

#myListView {
height: 700px;
width: 2000px; }

heightwidth 设置为 100% 或来自 calc() 的值不可避免地会导致 ListView 不填充并且不渲染。根据Quickstart: Adding a ListView MSDN 上的页面:

For a ListView to render, you must specify an absolute value for its height.

一切都很好,除了这个应用程序将出现在各种屏幕上并且需要可变高度。这是特别相关的,因为 ListView 将水平滚动。我希望滚动条出现在页面的最底部,就像在商店应用中一样。

我试过以编程方式重置高度,但没有成功。 那么,我怎样才能让这个 ListView 在各种屏幕上正确呈现?下面是我的 HTML 代码以供引用。

<div id="allMixesListView" data-win-control="WinJS.UI.ListView" 
data-win-options="
{
itemTemplate: select('#myTemplate'),
groupHeaderTemplate: select('#myHeaderTemplate'),
layout: {type: WinJS.UI.GridLayout},
selectionmode: 'none',
itemDataSource: dummyData.placeholderData.dataSource
}"
class="myListView">
</div>

最佳答案

完全可以将 WinJS.UI.ListView 设置为 height: 100%。然而,它参与的布局也必须有一些“定义的”高度。它不需要是明确的(例如不是 700px),但它确实需要产生一些明确的空间。

例子;给定这个 HTML:

<body>
<div>
<div data-win-control="WinJS.UI.ListView" style="height: 100%"></div>
</div>
</body>

ListView 所在的 DIV 的高度不是页面的 100%。它是 parent 的 100%。没有高度。所以它把自己设置得尽可能小。糟糕。

如果将高度从 100% 更改为 height: 100vh,则此布局将起作用,因为 listview 的高度已计算到父 div 占用空间的点,并且ListView 有一些布局空间。

请注意,答案并不是严格意义上的“将其设置为 100vh”。它是“确保布局有足够的空间来布置您的项目”。如果您在父元素上使用了 -ms-grid,那么您也会被设置(假设行、列设置正确)

关于listview - Windows 8 ListView 不会以 100% 高度呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14396403/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com