為什么我設置高度之后他不會填滿每一列之后再填第二列??？

為什么我設置了高度之后，它不會填滿每一列之后再去填下一列？

<!doctype?html>
<html>
<head>
???<meta?charset="utf-8">
???<title>columns</title>
???<link?href="style.css"?rel="stylesheet"?type="text/css">
???<style>
???????.columns?{
???????????width:?1000px;
???????????padding:?5px;
???????????height:500px;
???????????border:?1px?solid?green;
???????????margin:?20px?auto;
???????????-webkit-columns:?100px?3;
???????????-moz-columns:?100px?3;
???????????-o-columns:100px?3;
???????????-ms-columns:?100px?3;
???????????columns:?100px?3;
???????}
???</style>
</head>
<body>
<div?class="columns">
???<h2>我要分列顯示</h2>
???<p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS?Multi?Column?Layout?Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
???<p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS?Multi?Column?Layout?Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
???<p>為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS?Multi?Column?Layout?Module）。它主要應用在文本的多列布局方面。對于文本的多列布局，我想大家并不陌生，因為報紙和雜志上我們隨處可見，這種布局在報紙和雜志上都使用了幾十年了，但需要在Web頁面上實現文本的多列布局，正如下圖所示。</p>
</div>
</body>
</html>

效果如下：