css - 如何使 CSS 网格占据其父级高度和宽度的 100%？

标签 css css-grid

<分区>

我有下面的代码示例。我如何确保在给定行数或列数的情况下，网格会根据需要扩展元素以填充其父容器？

目的是有一种计算器应用程序，其中的 gird 元素作为按钮，应尽可能多但均匀地占用空间。

以下是我带来的。如您所见，有滚动，而且我不确定这是正确的方法。

body {
  min-height: 100%;
}

.wrapper {
  display: grid;
  position: relative;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1px;
  justify-content: center;
  height: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 12px;
}

.container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
<section class="container">
  <div class="wrapper">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
  </div>
</section>

最佳答案

grid-template-rows: repeat (2, 1fr) 不是必需的。行自动排列。

如果您的容器具有固定大小，请使用 px 大小而不是 vh。您还可以使用 calc 函数。

* { box-sizing: border-box;
}
html,body {
   height: 100%;
   margin: 0;
}
.footer {
   height: 10vh;
   background-color: #eee;
   text-align: center;
}
.wrapper {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 1px;
   justify-content: center;
   height: 90vh;
}
.box {
   background-color: #444;
   color: #fff;
   padding: 10px;
   font-size: 12px;
}
    <section class="container">
      <div class="wrapper">
        <div class="box a">A</div><div class="box b">B</div><div class="box c">C</div><div class="box d">D</div>
        <div class="box e">E</div><div class="box f">F</div><div class="box a">A</div><div class="box b">B</div>
        <div class="box c">C</div><div class="box d">D</div><div class="box e">E</div><div class="box f">F</div>
      </div>
    </section>
<footer class="footer">
  footer
</footer>

如果您的容器具有固定大小，请使用 px 大小

或者使用 Flex:

* { box-sizing: border-box;
}

html,body {
  height: 100%;
  margin: 0;
}
.footer {
  height: 10vh;
  background-color: #eee;
  text-align: center;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height:90vh;
}

.wrapper > div {
  width: 16.666%;
  text-align: center;
  font-size: 12px;
  line-height: 6;
  border: 1px solid;
  background-color: #444;
}
    <section class="container">
      <div class="wrapper">
        <div class="box a">A</div><div class="box b">B</div><div class="box c">C</div><div class="box d">D</div>
        <div class="box e">E</div><div class="box f">F</div><div class="box a">A</div><div class="box b">B</div>
        <div class="box c">C</div><div class="box d">D</div><div class="box e">E</div><div class="box f">F</div>
      </div>
    </section>
<footer class="footer">
  footer
</footer>

无页脚:

* { box-sizing: border-box;}

html,body {
  height: 100%;
  margin: 0;
}
.container {
  position: relative;
  min-height:100%;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  height:100%;
  margin: 0 auto;
  max-height:100%;
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}
.wrapper > div {
  width: 16.666%;
  text-align: center;
  font-size: 12px;
  line-height: 6;
  border: 1px solid;
  background-color: #444;
}
<section class="container">
  <div class="wrapper">
    <div class="box a">A</div><div class="box b">B</div><div class="box c">C</div><div class="box d">D</div>
    <div class="box e">E</div><div class="box f">F</div><div class="box a">A</div><div class="box b">B</div>
    <div class="box c">C</div><div class="box d">D</div><div class="box e">E</div><div class="box f">F</div>
  </div>
</section>

示例 4:页脚和页眉

* { box-sizing: border-box; }

html,body {
  height: 100%;
  margin: 0;
}
.footer {
  height: 10vh;
  background-color: #eee;
  text-align: center;
  font-size: 4vh;
}
.header {
  height: 10vh;
  background-color: #eee;
  text-align: center;
  font-size: 4vh;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height:80vh;
}
.wrapper > div {
  width: 16.666%;
  text-align: center;
  border: 1px solid;
  background-color: #444;
}
<div class="header">header</div>

<section class="container">
      <div class="wrapper">
        <div class="box a">A</div><div class="box b">B</div><div class="box c">C</div><div class="box d">D</div>
        <div class="box e">E</div><div class="box f">F</div><div class="box a">A</div><div class="box b">B</div>
        <div class="box c">C</div><div class="box d">D</div><div class="box e">E</div><div class="box f">F</div>
      </div>
</section>
<footer class="footer">
  footer
</footer>

**示例 5:**

* { box-sizing: border-box;}
html,body {  height: 100%;  margin: 0;}

.footer {
  height: 15vh;
  background-color: #eee;
  text-align: center;
}
.header {
  height: 15vh;
  background-color: #eee;
  text-align: center;
  
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height:70vh;
}
.wrapper > div {
  width: 16.666%;
  text-align: center;
  font-size: 12px;
  border: 1px solid;
  background-color: #444;
}
<div class="header">header</div>
<div class="wrap">
<section class="container">
  <div class="wrapper">
    <div class="box a">A</div><div class="box b">B</div><div class="box c">C</div><div class="box d">D</div>
    <div class="box e">E</div><div class="box f">F</div><div class="box a">A</div><div class="box b">B</div>
    <div class="box c">C</div><div class="box d">D</div><div class="box e">E</div><div class="box f">F</div>
  </div>
</section>
</div>
<div class="footer">
      footer
</div>

关于css - 如何使 CSS 网格占据其父级高度和宽度的 100%？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56206002/

上一篇：css - ViewEncapsulation 更改 css 样式特异性(权重)

下一篇：css - 我想让博主H2,H3,H4背景限制在文字大小

相关文章：

html - 将 Sprite 图像与表格单元格的中心对齐

html - 在 Css-grid 上设置 grid-gap 以自动填充可用的水平空间

javascript - 淡入、淡出标签，然后在重复该过程之前更改文本

html - 使 css 网格与微软浏览器兼容

html - 网格布局css中的按钮

html - 如何使两列布局具有等高列和一个可滚动列？

javascript - 使用 CSS Grids，有没有办法在使用 grid-auto-flow : column? 时包装隐式网格

html - 两个提交按钮和两个代码格式导致浏览器渲染差异

jquery - 制作链接 :active

html - 将 div 定位在具有绝对位置的 div 下方

©2024 IT工具网  联系我们