Html css网格上没有边距/填充底部?
当出现溢出时,css网格上的边距底部似乎消失了 无论我采用哪种方式来布局我的页面(flexbox、css网格、fixed),在使用css网格时,我似乎都会松开页边距/填充底部 这个问题的一个例子是: HTMLHtml css网格上没有边距/填充底部?,html,css,reactjs,margin,Html,Css,Reactjs,Margin,当出现溢出时,css网格上的边距底部似乎消失了 无论我采用哪种方式来布局我的页面(flexbox、css网格、fixed),在使用css网格时,我似乎都会松开页边距/填充底部 这个问题的一个例子是: HTML 我希望边距/填充符与我在父项上定义的内容一致,但它不一致并且消失/折叠问题仅仅在于在上设置高度;这将高度设置为初始视口(不考虑滚动) 删除此高度可以解决以下问题: html, 身体{ 保证金:0; 身高:100%; } .标题{ 位置:固定; z指数:2; 排名:0; 左:0; 宽度:
我希望边距/填充符与我在父项上定义的内容一致,但它不一致并且消失/折叠问题仅仅在于在
上设置高度
;这将高度设置为初始视口(不考虑滚动)
删除此高度可以解决以下问题:
html,
身体{
保证金:0;
身高:100%;
}
.标题{
位置:固定;
z指数:2;
排名:0;
左:0;
宽度:100%;
高度:20px;
背景:白色;
盒影:0px2px4pRGBA(0,0,0,0.24);
}
.导航{
位置:固定;
z指数:1;
顶部:20px;
左:0;
宽度:200px;
高度:计算(100%-20px);
背景#FAF9F8;
右边框:1px实心#d9d9d9;
}
.文章{
背景#f3f5;
位置:相对位置;
顶部:20px;
左:200px;
宽度:计算(100%-200px);
/*高度:计算(100%-20px)*/
填充:10px;
}
.settings\u网格{
显示:网格;
身高:100%;
网格模板列:重复(自动拟合,最小值(32rem,1fr));
网格自动行:14rem;
网格间距:3rem;
}
.settings\u网格项{
显示器:flex;
弯曲方向:立柱;
对齐项目:居中;
对正内容:空间均匀;
文本对齐:居中;
背景色:rgba(0,0,0,0.4);
边界半径:6px;
}
@介质(最大宽度:768px){
.导航{
底部:0;
左:0;
右:0;
顶部:自动;
宽度:100%;
高度:60px;
}
.文章{
/*高度:计算(100%-80px);
左:0;
宽度:100%;
}
}
太好了,它可以工作。在我的项目中牢记这一点,我似乎仍然有同样的问题,尽管家长没有设置为高度:100%,而是灵活:1。我认为这又是问题的根源。我还需要将网格保持在100%的高度,这样孩子们就可以在桌面设备上工作。你有没有可能看一看?我忘记了在网格布局容器中设置的高度。删除高度就像为某些列设置边距顶部的魅力。
<div class="header"> </div>
<div class="nav"> </div>
<div class="article">
<div class="settings__grid">
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
<div class="settings__grid-item"> </div>
</div>
</div>
html,
body {
margin: 0;
height: 100%;
}
.header {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 20px;
background: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
}
.nav {
position: fixed;
z-index: 1;
top: 20px;
left: 0;
width: 200px;
height: calc(100% - 20px);
background: #FAF9F8;
border-right: 1px solid #d9d9d9;
}
.article {
background: #F3F3F5;
position: relative;
top: 20px;
left: 200px;
width: calc(100% - 200px);
height: calc(100% - 20px);
padding: 10px;
}
.settings__grid {
display: grid;
height: 100%;
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
grid-auto-rows: 14rem;
grid-gap: 3rem;
}
.settings__grid-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
@media (max-width: 768px) {
.nav {
bottom: 0;
left: 0;
right: 0;
top: auto;
width: 100%;
height: 60px;
}
.article {
height: calc(100% - 80px);
left: 0;
width: 100%;
}
}