html - 为移动设备调整堆叠列的高度 (@media)

Question

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

但是在移动设备上查看时，堆叠面板的高度是固定的。我需要移动 View 面板在添加更多内容时自动加长。今天一直在尝试各种不同的 CSS 解决方案，但还没有成功。

       * {
         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%;
         }
       }        

Answer 1

您是否希望列自动扩展？ 你试过高度:自动吗？

@media screen and (max-width: 600px) {
.column {
   width: 100%;
   height: auto;
   }
}