调整为移动设备堆积的列的高度（@media）

Question

以下CSS代码非常适合响应式模板。它将在台式机/笔记本电脑/ iPad上创建三列，并将这些列堆叠到手机等上。

但是，在移动设备上查看时，堆叠的面板a是固定高度的。我需要移动视图面板在添加更多内容时自动加长。今天一直在尝试使用不同CSS解决方案的所有SORTS，但还没有运气。

       * {
         box-sizing: border-box;
       }


       /* Create three equal columns that floats next to each other */

       .columntop {
          float: left;
          width: 33.33%;
          padding: 10px;
       }

       .column {
          float: left;
          width: 33.33%;
          padding: 10px;
          height: 1000px; /* This controls desktop/laptop views only */
       }

       /* Clear floats after the columns */
       .row:after {
          content: "";
          display: table;
          clear: both;
       }

       /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
       @media screen and (max-width: 600px) {
         .column {
            width: 100%;
         }
       }