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

Question

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

这是我要创建的 link：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

因为你有一个 1px 的边框。

25% + 75% + 1px = 100% + 1px, 不是 100%。

Answer 2

你这里有一个 typo/error :

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

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

Why Won't Columns Ride Up the Page?

html

css

multiple-columns