2列のリスト項目を分割する方法は、ulの高さを設定せずに、2番目の列の前に1番目の列を埋め込む方法はありますか？

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; 
} 

は私の質問の明確化：親をこの中にcaseはdivですスクリーンの高さからページヘッダー（別のdiv）の高さを差し引いたものです。したがって、ユーザーの解像度に応じて異なります。

Answer 1

親要素は、高さよりもサイズ変更が可能です。あなたがする必要があるのは、リストの高さを100％に設定するだけです。

リストの高さは、その親

* { 
 
    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の高さによって決定されます：あなたの問題はあなたのソリューションです。

EDIT：最終要件に更新されました。