强制css网格容器填充设备的整个屏幕

kuarbcqp 于 2023-03-20 发布在其他

关注(0)|答案(4)|浏览(111)

对于单页应用，如何强制css网格容器采用设备屏幕的全宽和全高？修改后的示例来自Mozilla：Firefox documentation

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 3;
  grid-row: 3;
}
.five {
  border-style: solid;
  border-color: green;
  grid-column: 2;
  grid-row: 4;
}
.six {
  border-style: solid;
  border-color: purple;
  grid-column: 3;
  grid-row: 4;
}

<html>
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
</html>

我不知道该怎么做才能使这个代码工作。

css

来源：https://stackoverflow.com/questions/43747185/force-css-grid-container-to-fill-full-screen-of-device

4条答案

按热度按时间

dphi5xsq1#

如果利用width: 100vw;和height: 100vh;，应用了这些样式的对象将拉伸到设备的全宽和全高。
还要注意，有时候浏览器会在你的视图中添加填充和边距。我添加了一个*全局无填充和边距，这样你就可以看到区别了。记住这一点。

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

<html>
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
</html>

赞(0）回复(0）举报 2023-03-20

1u4esq0p2#

为全高页面设置的两个重要CSS属性如下：
1.允许身体生长到它所需要的含量那么高。

html { height: 100%; }

1.强制主体不小于窗口高度。

body { min-height: 100%; }

你用你的网格做什么是无关紧要的，只要你使用分数或百分比，你应该是安全的在所有情况下。
Have a look at this common dashboard layout .

赞(0）回复(0）举报 2023-03-20

wpx232ag3#

您可以添加属性position: fixed; top: 0; left: 0; right: 0; bottom: 0;来实现固定位置，并且此解决方案也适用于较旧的浏览器。
如果要嵌入它，请将position: absolute;添加到 Package 器，将position: relative;添加到 Package 器外部的div。

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 3;
  grid-row: 3;
}
.five {
  border-style: solid;
  border-color: green;
  grid-column: 2;
  grid-row: 4;
}
.six {
  border-style: solid;
  border-color: purple;
  grid-column: 3;
  grid-row: 4;
}

<html>
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
</html>

赞(0）回复(0）举报 2023-03-20

iyr7buue4#

如果您希望.wrapper是全屏的，只需在wrapper类中添加以下内容：
position: absolute; width: 100%; height: 100%;
您还可以添加top: 0和left:0

赞(0）回复(0）举报 2023-03-20