如何使网格容器完全符合页面的全尺寸？

发布于 2025-02-09 08:35:40 字数 958 浏览 2 评论 0原文

学习网格显示，无法弄清楚如何使网格完整大小页面。例如：

.wrapper {
  display: grid;
  border-style: solid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
grid-template-areas:
  'a a a'
  'a a a'
  'b b b';
}

.first {
  background-color: grey;
  grid-area: a;
}

.second {
  grid-area: b;
  background-color: red;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Oil Tycoon</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="wrapper">
  <div class="first">
    123
  </div>
  <div class="second">
  123456
  </div>
  </div>
</body>

</html>

这是由两个元素挑选的三列，但它们的屏幕尺寸不像网格 - 板块区域一样。如何使网格全屏制作？

原文

Learning grid display and can't figure out how to make grid full size of a page. for example:

.wrapper {
  display: grid;
  border-style: solid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
grid-template-areas:
  'a a a'
  'a a a'
  'b b b';
}

.first {
  background-color: grey;
  grid-area: a;
}

.second {
  grid-area: b;
  background-color: red;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Oil Tycoon</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="wrapper">
  <div class="first">
    123
  </div>
  <div class="second">
  123456
  </div>
  </div>
</body>

</html>

here's three columns that picked by two element but they are not in a full size of a screen as should grid-template-area do. how do i make grid fullscreen?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一直在等你来 2025-02-16 08:35:41

我认为这是由于浏览器内置边距或填充物所致。看看正常化重置浏览器默认样式行为。

我添加了

body { margin: 0; padding: 0; min-height:100vh;}

此删除的默认样式从身体重置的边距和填充。然后，您可以将自己的保证金添加到元素中。

body {
  margin: 0; padding:0; min-height:100vh;
}

.wrapper {
  min-height:100vh
  display: grid;
  border-style: solid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
grid-template-areas:
  'a a a'
  'a a a'
  'b b b';
}

.first {
  background-color: grey;
  grid-area: a;
}

.second {
  grid-area: b;
  background-color: red;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Oil Tycoon</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="wrapper">
  <div class="first">
    123
  </div>
  <div class="second">
  123456
  </div>
  </div>
</body>

</html>

I think this is due to browsers having built in margin or padding. Take a look at Normalize which resets browsers default styling behaviour.

I have added

body { margin: 0; padding: 0; min-height:100vh;}

This removes margin and padding from the body resetting its default styles., you can then add you own margin to your elements.

body {
  margin: 0; padding:0; min-height:100vh;
}

.wrapper {
  min-height:100vh
  display: grid;
  border-style: solid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
grid-template-areas:
  'a a a'
  'a a a'
  'b b b';
}

.first {
  background-color: grey;
  grid-area: a;
}

.second {
  grid-area: b;
  background-color: red;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Oil Tycoon</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="wrapper">
  <div class="first">
    123
  </div>
  <div class="second">
  123456
  </div>
  </div>
</body>

</html>

回复收藏 0 原文

伴我心暖 2025-02-16 08:35:40

人体只会伸展到满足于填充空间的满足感。因此，您应该给网格和身体一个100VH的高度。 VH的意思是“视口高”。

body, wrapper {min-height; 100vh;}

您可以在CodePen上使用解决方案： https://codepen.io/jensgro/pen /bglyxvy？编辑= 1100

欢呼，詹斯

The body will only stretch as far as there will be content to fill the space. Therefor you should give both the grid and the body a min-height of 100vh. vh means "viewport height".