个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
26
4
如何强制 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>我不确定如何才能使这段代码正常工作。
最佳答案
如果您利用 width: 100vw; 和 height: 100vh;，应用了这些样式的对象将拉伸(stretch)到设备的整个宽度和高度。
另请注意，有时填充和边距会被浏览器等添加到您的 View 中。我添加了一个 * 全局无填充和边距，因此您可以看到差异。请记住这一点。
*{
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>关于html - 强制CSS网格容器填满设备的全屏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43747185/
26
4
0
我正在运行 Play! 2.3 使用 Akka 的多线程应用程序。每个线程访问 MySQL 数据库并运行一些计算。每次我运行一组这样的任务时，应用程序的内存占用量都会增加，这主要是由于 JDBC4Pr
我是 JavaScript 新手，正在尝试实现选择排序来亲自接触数组(注意:我知道有一个内置的排序函数)。不过，我遇到了一些奇怪的行为。 这是我的代码: function selectionSort(
我正在使用 unsemantic grid创建我的布局。好吧，我有一个容器，其中有一个标签和一个输入文本。标签的宽度为 20% 然后 margin-rightof 1em 然后我想让容器中的其余空间由
看看这张取自 morsmachine.dk/go-scheduler 的著名图片 灰名单是 P 的本地运行队列。如果此队列变空，它们将被全局运行队列中的 go routines 填充。 问题是，谁来填
(帖子创建于 2016 年 10 月 5 日) 我注意到每次运行图像并删除它时，我的系统都不会恢复到原来的可用空间量。 我应用于容器的生命周期是: > docker build ... > docke
我有一个应用程序，它在启动时运行两个或三个完整的 GC。有很多堆空间，不需要运行任何 GC(minor 或 full)。然而，在 gc 日志中，我可以看到 permgen 被填满，然后立即运行完整
我正在尝试制作可视化 VStack 属性的 VStack 示例应用 但是我的 VStack 无法填满屏幕的宽度 我在互联网上尝试了很多解决方案(frame modifier、HStack with S
[已解决] 所以我在页面顶部有一个高度恒定的 div，我希望在它下面有一个 iFrame 来填充页面的其余部分。 Google Images 和 LinkedIn 做的事情非常相似 参见:http:/
我正在尝试使我的标题框与我的图像大小相同，同时又不失去 flex-slider 的响应能力，有什么建议吗？ http://jsfiddle.net/bmBnF/10/ 疯狂的K 最佳答案 我通过将其设
我有一个元素是 的兄弟元素动态填充 hello 我想要 固定在屏幕底部直到动态 s 要求将其向下推到 View 下方。 我尝试了以下但无法获得我想要的结果。 该元素位
我是一名优秀的程序员,十分优秀！