html - CSS Box模型列高度重叠

我在下面的Css框模型代码中尝试创建具有相同高度的3列布局。它也应该具有响应性。

<header>Header</header>  <content>
<div class="column columnLeft">
      <h2>Column Left</h2>
</div>
<div class="column columnMiddle">
  <h2>Column Middle</h2>
</div>
<div class="column columnRight">
  <h2>Column Right</h2>
</div> </content><footer>Footer</footer>

这是CSS代码。看来问题出在内容上。它将页脚推到所需的位置。

    *{ box-sizing:border-box;}
     html,body{  margin: 0;padding: 0;
    height: 100%;
     }
       header{
      background:#000;
      color: #fff;
     text-align: center;
     height: 50px;
     }
     content{
      margin: 0 auto;
       overflow: hidden;
      min-height: calc(100vh - 0px);
     height:auto !important;
        overflow-y: auto;
       }
       .column{
       width: 33.333%;
       float: left;
       text-align: center;
       padding:1rem;
       min-height: 100%;
       overflow-y: hidden;
     }
     .columnLeft{
        background: #ccc;
      }
      .columnMiddle{
      background: #fff;
             }
          .columnRight{
           background: #ccc;
            }
           footer{
          background:#000;
          }
               @media only screen and (max-width:768px){
            .columnLeft, .columnMiddle{
        width:50%;
        }
    .columnRight{
        width:100%;
    }
}
@media only screen and (max-width:480px){
    .column{
         float: none;
         width:100%;
        }
        }

问题是页面重叠并且出现垂直滚动。

https://codepen.io/mkltkn/pen/LeWrzO

最佳答案

在列类的CSS中添加“最大宽度：33.333％”。将其放置在宽度以下：33.333％。这样，它将在必要时默认。见下面的例子

.column{
  width: 33.333%;
  max-width: 33.333%;
  float: left;
  text-align: center;
  padding:1rem;
  min-height: 100%;
  overflow-y: hidden;
}