css - DIV 位置の相対位置と上端を % として使用して同じ高さの列を達成する際の問題

Question

いくつかの注意点: 画面が最小化されたときにフロートが「下」にならないようにする方法がない限り、フロート ソリューションは使用しないでください。

また、px ではなく % を使用することを強くお勧めします。前もって感謝します！

私の好みのコードは次のようになります (ただし、機能しません)。

.col {
position: relative; 
width: 20%; 
height:100%;}

<div style="width: 960px; height: 1000px;">
   <div class="col">Column 1</div>
   <div class="col" style="left:20%; top:-100%;">Column 2</div>
   <div class="col" style="left:40%; top:-200%;">Column 3</div>
   <div class="col" style="left:60%; top:-300%;">Column 4</div>
   <div class="col" style="left:80%; top:-400%;">Column 5</div>
</div>

前述のように、これには私が求めていた効果はありません。ただし、top を % から px に変更すると機能します。

例：

<div style="width: 960px; height: 1000px;">
   <div class="col">Column 1</div>
   <div class="col" style="left:20%; top:-500px;">Column 2</div>
   <div class="col" style="left:40%; top:-1000px;">Column 3</div>
   <div class="col" style="left:60%; top:-1500px;">Column 4</div>
   <div class="col" style="left:80%; top:-2000px;">Column 5</div>
</div>

どこが間違っていますか？左は正常に動作しますが、上は動作しません...!

繰り返しますが、画面のサイズが変更されたときに列を動かさずに float を使用できない限り、float を使用せずに、px ではなく % を使用して、5 つの同じ高さの列を並べて表示します。

再度、感謝します！

更新 - 本当に私を悩ませているのは、左の % がうまく機能するのに、上の % が機能しない理由だと思います。