html - 为什么专栏不会登上页面？

Question

我正在尝试制作一个移动响应式布局，它有一个延伸到整个页面的侧边栏，一个 header，在这个 header 下方，三列。

这是我要创建的内容的链接:CodePen

代码如下:

html {
  margin: 0;
  padding: 0;
  border: 0;
}
* {
  border: 1px solid red;
}
body {
  margin: 0;
  padding: 0;
  border: 0;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.container {
  height: 100vh;
}
/* media queries */

@media screen and (min-width: 56px) {
  .header {
    width: 100%;
    height: 12vh;
    background-color: blue;
  }
  .sidebar {
    width: 100%;
    height: 50vh;
    background-color: #4e4e4e;
  }
  .col1,
  .col2,
  .col3 {
    width: 100%;
    height: 25vh;
    margin: 0 auto;
  }
  .col1 {
    background-color: green;
  }
  .col2 {
    background-color: yellow;
  }
  .col3 {
    background-color: purple;
  }
}
/* end of resolution of 56px */

@media screen and (min-width: 864px) {
  .header {
    width: 75%;
    float: right;
  }
  .sidebar {
    width: 25%;
    height: 100vh;
    float: top left;
  }
  .threecolumns {
    width: 75%;
    float: right;
  }
  .col1,
  .col2,
  .col3 {
    float: left;
    width: 33%;
  }
}

<div class="container">
  <div class="header">
    HEADER
  </div>
  <!-- end of header -->
  <div class="sidebar">
    SIDEBAR
  </div>
  <!-- end of sidebar -->
  <div class="threecolumns">
    <div class="col1">
      COL1
    </div>
    <!-- end of column1 -->
    <div class="col2">
      COL2
    </div>
    <!-- end of column 2 -->
    <div class="col3">
      col1
    </div>
    <!-- end of column 3 -->
  </div>
  <!-- end of three columns -->
</div>
<!-- end of container -->

在分辨率为 864px 的情况下，我试图让三列位于主容器之上。现在，它们只是卡在布局的底部。

我的问题:为什么我的三列没有爬上容器，我该怎么办？

如有任何信息，我们将不胜感激。

Answer 1

你这里有错别字/错误:

.sidebar {
    width: 25%;
    height: 100vh;
    float: top left;
  }

没有float:top left，所以只需删除top

并且你需要添加box-sizing:border-box

* {
  border: 1px solid red;
  box-sizing: border-box;
}
html, body{
  margin: 0;
  padding: 0;
}
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.container {
  height: 100vh;
}
/* media queries */

@media screen and (min-width: 56px) {
  .header {
    width: 100%;
    height: 12vh;
    background-color: blue;
  }
  .sidebar {
    width: 100%;
    height: 50vh;
    background-color: #4e4e4e;
  }
  .col1,
  .col2,
  .col3 {
    width: 100%;
    height: 25vh;
    margin: 0 auto;
  }
  .col1 {
    background-color: green;
  }
  .col2 {
    background-color: yellow;
  }
  .col3 {
    background-color: purple;
  }
}
/* end of resolution of 56px */

@media screen and (min-width: 864px) {
  .header {
    width: 75%;
    float: right;
  }
  .sidebar {
    width: 25%;
    height: 100vh;
    float: left;
  }
  .threecolumns {
    width: 75%;
    float: right;
  }
  .col1,
  .col2,
  .col3 {
    float: left;
    width: 33.33%;
  }
}

<div class="container">
  <div class="header">
    HEADER
  </div>
  <!-- end of header -->
  <div class="sidebar">
    SIDEBAR
  </div>
  <!-- end of sidebar -->
  <div class="threecolumns">
    <div class="col1">
      COL1
    </div>
    <!-- end of column1 -->
    <div class="col2">
      COL2
    </div>
    <!-- end of column 2 -->
    <div class="col3">
      col1
    </div>
    <!-- end of column 3 -->


  </div>
  <!-- end of three columns -->


</div>
<!-- end of container -->