html - css 框模型列高度重叠

Question

我有下面的 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

Answer 1

将“最大宽度:33.333%”添加到列类中的 css。把它放在你的宽度以下:33.333%。这样它会在必要时默认。请参见下面的示例

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