问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

强制 css 网格容器填充设备的全屏

社区维基
1
新手上路，请多包涵

如何强制 css 网格容器为单页应用程序获取设备屏幕的完整宽度和高度？修改后的示例来自 Mozilla： Firefox 文档

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

我不确定该怎么做才能使此代码正常工作。

原文由 metrix 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcsscss-grid
阅读 683
2 个回答
得票最新
社区维基
1
✓ 已被采纳

如果您利用 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>

原文由 NSTuttle 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

为全高页面设置的两个重要 CSS 属性是：

  1. 让身体长到它所需要的高度。
    html { height: 100%; }
  1. 强制身体不要小于窗口高度。
    body { min-height: 100%; }

只要您使用分数或百分比，您在所有情况下都应该是安全的，您对腰带的处理是无关紧要的。

看看这个常见的仪表板布局。

原文由 luukvhoudt 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题