使用浏览器窗口的100％高度/宽度的多个列的HTML网格布局

Posted 2021-03-27

我想将整个html页面划分为4个部分，我使用css：

 <style>
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-gap: 10px;
  width: 100vw;
  height: 100vh;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1  ;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 ;
  grid-row: 1 ;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-column: 3;
  grid-row: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 4;
  grid-row: 1;
}
}
</style>

使用这个网格定义我定义：

<div class="column">
  <div class="one" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="two" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="three" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="four" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

但是，不是创建4个垂直部分，而是创建4个水平线，并且仅使用部分html网页。我该如何更改代码以按预期工作？

UPD

将div类更改为wrapper之后：

答案

您已将类“column”分配给包装器，但将其样式定义为.wrapper。将div的类重命名为wrapper或将css中的类名从包装器更改为列。

<div class="wrapper">...</div>

这是一个有效的jsfiddle

另一答案

你不需要column div。

试试这个：

<style>
*{
 box-sizing: border-box;
 padding: 0;
 margin: 0;
}
.wrapper {
  display: grid;
 border-style: solid;
 border-color: red;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(1, 1fr);   
 grid-gap: 10px;
 width: 100vw;
 height: 100vh;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1  ;
  grid-row: 1;
}
.two {
   border-style: solid;
   border-color: yellow;
   grid-column: 2 ;
   grid-row: 1 ;
}
.three {
   border-style: solid;
   border-color: violet;
   grid-column: 3;
   grid-row: 1;
 }
.four {
   border-style: solid;
   border-color: aqua;
   grid-column: 4;
   grid-row: 1;
 }
 }
 </style>

   <div class='wrapper'>

 <div class="one" style="background-color:#aaa;">
   <h2>Column 1</h2>
   <p>Some text..</p>
  </div>
  <div class="two" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
 </div>
 <div class="three" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="four" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
   </div>