Отрегулируйте высоту столбцов для мобильного устройства (@media)

Question

Код CSS ниже прекрасно работает для адаптивного шаблона. Он создает три столбца на рабочем столе / ноутбуке / iPad и объединяет их в столбцы для телефонов и т. Д.

НО при просмотре на мобильном устройстве сложенные панели a имеют фиксированную высоту. Мне нужно, чтобы панели мобильного просмотра автоматически удлинялись, когда добавлялось больше контента. Пробовал все виды разных 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;
   }
}