force css grid container to fill full screen of device

前端未结

关注

 4  1873

How do I force a css grid container take the full width and height of the device screen for a single page app? Modified example is from Mozilla: Firefox documentation

相关标签:

4条回答

鱼传尺愫

2021-01-31 01:46

If you take advantage of width: 100vw; and height: 100vh;, the object with these styles applied will stretch to the full width and height of the device.

Also note, there are times padding and margins can get added to your view, by browsers and the like. I added a * global no padding and margins so you can see the difference. Keep this in mind.

*{
  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)

渐次进展

2021-01-31 01:51

You can add position: fixed; with top left right bottom 0 attribute, that solution work on older browsers too.

If you want to embed it, add position: absolute; to the wrapper, and position: relative to the div outside of the wrapper.

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

不要未来只要你来

2021-01-31 01:53
Two important CSS properties to set for full height pages are these:
1. Allow the body to grow as high as the content in it requires.
```
html { height: 100%; }
```
2. Force the body not to get any smaller than then window height.
```
body { min-height: 100%; }
```
What you do with your gird is irrelevant as long as you use fractions or percentages you should be safe in all cases.

Have a look at this common dashboard layout.
0 讨论(0)
发布评论:

提交评论
- 加载中...
执笔经年

2021-01-31 01:56

If you want the .wrapper to be fullscreen, just add the following in the wrapper class:

position: absolute; width: 100%; height: 100%;

You can also add top: 0 and left:0

0 讨论(0)
发布评论:

提交评论
- 加载中...