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

您可以使用flex布局，更容易处理：

＆＃13;

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  display:flex;
  flex-direction:column
}

header {
  background: #000;
  color: #fff;
  text-align: center;
  height: 50px;
}

content {
  flex:1;
  display:flex;
  flex-wrap:wrap;
}

.column {
  flex:1;
  text-align: center;
}

.columnLeft,.columnRight {
  background: #ccc;
}

.columnMiddle {
  background: #fff;
}


footer {
  background: #000;
  color:#fff;
}

@media only screen and (max-width:768px) {
  .columnLeft,
  .columnMiddle {
    flex:0 0 50%;
  }
  .columnRight {
    flex:0 0 100%;
  }
}

@media only screen and (max-width:480px) {
  .column {
    flex:0 0 100%;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

添加＆＃34;最大宽度：33.333％＆＃34;你的专栏课程中的css。把它放在你的宽度之下：33.333％。这样它将在必要时默认。见下面的例子

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

Answer 3

问题出在.column类中，它推动了页脚。我修改它来改变最小高度：calc（100vh - 0px）;

 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: calc(100vh - 0px);
    overflow-y: hidden;
 }

Css框模型列高度重叠

3 个答案: