个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在下面的代码片段中，“main”上下有空隙' 区域应该是一个与网格单元格高度相同的空单元格。最底部还有一个空白区域。
我试过设置 grid-auto-flow到不同的值，但是当它设置为 column 时，除了最底部的间隙外没有任何效果。 .
是什么原因造成的？以及如何解决？
.header {
grid-area: hd;
}
.footer {
grid-area: ft;
}
.content {
grid-area: main;
}
.sidebar {
grid-area: sd;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
max-width: 940px;
margin: 0 auto;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-auto-rows: minmax(auto, auto);
grid-template-areas:
"hd hd ft"
"sd . ft"
"sd main ft"
"sd . ft";
}<div class="wrapper">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>最佳答案
**我在 Chrome 和 Firefox 上测试了代码，结果是 **
始终添加 <!DOCTYPE>声明到您的 HTML 文档，以便浏览器知道期望的文档类型。
.header {
grid-area: hd;
}
.footer {
grid-area: ft;
}
.content {
grid-area: main;
}
.sidebar {
grid-area: sd;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
max-width: 940px;
margin: 0 auto;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-auto-rows: minmax(auto, auto);
grid-template-areas:
"hd hd ft"
"sd . ft"
"sd main ft"
"sd . ft";
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>关于html - CSS 网格中的神秘缺口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58131619/
25
4
0
我刚刚开始使用 flutter，我想创建一个带有 FAB 和缺口的底部应用栏。 我的脚手架代码如下: return Scaffold( appBar: AppBar( ti
我已经使用 swift 在我的应用程序顶部实现了一个 pageViewIndicator。我一直在我个人的 iPhone 上测试它，它一直有效，但是当使用 iPhone X 模拟器时，我注意到它消失在
我有一个 ImageView ，它位于 View 顶部的中央。 这在所有设备上看起来都不错，但 iPhone X 除外，因为 iPhone X 的缺口会裁剪图像。 有没有一种方法可以从屏幕的凹口而不是
我对此很陌生，如果这是一个愚蠢的问题，我很抱歉。如何让我的 Xamarin.Forms 应用在适用时在状态栏或缺口下方启动？我试过使用 NavigationPage ，但随后它开始在屏幕顶部下方磨损。
我是一名优秀的程序员,十分优秀！