html - 如何将列表项分为两列，在不设置 ul 高度的情况下先填充第二列？

Question

我有一个包含 2 列的列表。我会根据需要向其中添加元素，我想填充第一列，当它已满时，第二列。

问题是列表的高度将由其父级的高度决定(用户可以调整大小)，所以我不想设置列表高度。

这是一个设置列表高度的例子:

https://jsfiddle.net/zwfv26hp/

HTML:

<div>
<ul>
<li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li>
<li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li>
<li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li>
<li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li>
<li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>word</li><li>wordEnd</li>
</ul>
</div>

CSS:

ul {
  column-fill: auto;
  column-count: 2;
  max-height: 100%;
  height: 500px;
}

澄清我的问题:在这种情况下，父级是一个 div，其屏幕高度减去页眉(另一个 div)高度。因此它会根据用户分辨率而有所不同。

Answer 1

由于父元素是可调整大小的，因此它具有高度。您需要做的只是将列表的高度设置为 100%。你的问题就是你的解决方案:

the height of the list will be determined by the height of its parent

* {
    box-sizing: border-box;
    margin: 0;
}
html, body {
     height: 100%;
 }
 header {
     height: 100px;
     background: none #eee;
 }
 ul {
     margin: 0;
     column-fill: auto;
     column-count: 2;
     -moz-column-fill: auto;
     -moz-column-count: 2;
     height: calc(100vh - 100px);
 }

<header>
    <h1>Header</h1>
</header>
<div>
    <ul>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
        <li>word</li>
    </ul>
</div>

Updated Fiddle here .

编辑:更新为最新要求。