Html Flexbox子级忽略父级'；填充物

我的

#main

元素忽略它的包装填充。我在孩子身上设置了

位置：绝对

，但当我试图将其从

位置：静态

更改为

位置：相对

时，它只会忽略父母的

高度

。有解决办法吗

body，html{
身高：100%；
保证金：0；
填充：0；
}
#包装体{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
#包装头{
宽度：100%；
flex:0150px；
背景：url（“header.png”）；
显示器：flex；
对齐项目：居中；
盒影：0 1px4pRGBA（0,0,0,0.8）；
z指数：5；
}
#包装总管{
flex:1自动；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
盒影：0 1px4pRGBA（0,0,0,0.6）；
填充：25px；
}
#包装页脚{
宽度：100%；
flex:01自动；
背景色：#212121；
}
#菜单{
显示器：flex；
弯曲方向：行；
列表样式类型：无；
右：0；
位置：绝对位置；
}
.菜单按钮{
背景色：#3b3b；
宽度：100px；
高度：22px；
右边距：15px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
光标：指针；
颜色：#F7F7F7；
边界半径：2px；
字体系列：“codropsicons”，verdana；
字号：700；
文本转换：大写；
字体大小：14px；
过渡：0.5s；
盒影：0 1px4pRGBA（0,0,0,0.6）；
文本阴影：2px1p2pRGBA（0,0,0,0.3）；
}
.活动按钮，.菜单按钮：悬停{
背景色：#E0962D；
}
#主要{
背景颜色：绿色；
身高：100%；
宽度：100%；
位置：绝对位置；
}
#版权所有{
高度：20px；
宽度：自动；
显示器：flex；
对齐项目：居中；
字体系列：“codropsicons”，verdana；
字号：700；
文本转换：大写；
字体大小：10px；
颜色：#F7F7F7；
左边距：15px；
不透明度：0.1；
}

O nas
奥弗塔
加莱里亚
康塔克
试验

试验


Koyot©2017版权所有

正如Santi所说，您可以删除

#main

上的

位置：绝对

，因为这样会将元素相对于其最近定位的祖先放置，而忽略祖先的填充

或者，如果这不是一个选项，您可以使用与填充量匹配的

top/left/right/bottom

值，如果不再需要，则删除父级上的填充

/*标记*/
身体，
html{
身高：100%；
保证金：0；
填充：0；
}
/*标签末尾*/
/*包装纸*/
#包装体{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
#包装头{
宽度：100%；
flex:0150px；
背景：url（“header.png”）；
显示器：flex；
对齐项目：居中；
盒影：0 1px4pRGBA（0,0,0,0.8）；
z指数：5；
}
#包装总管{
flex:1自动；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
盒影：0 1px4pRGBA（0,0,0,0.6）；
}
#包装页脚{
宽度：100%；
flex:01自动；
背景色：#212121；
}
/*包装纸的末端*/
/*内容*/
#菜单{
显示器：flex；
弯曲方向：行；
列表样式类型：无；
右：0；
位置：绝对位置；
}
.菜单按钮{
背景色：#3b3b；
宽度：100px；
高度：22px；
右边距：15px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
光标：指针；
颜色：#F7F7F7；
边界半径：2px；
字体系列：“codropsicons”，verdana；
字号：700；
文本转换：大写；
字体大小：14px；
过渡：0.5s；
盒影：0 1px4pRGBA（0,0,0,0.6）；
文本阴影：2px1p2pRGBA（0,0,0,0.3）；
}
.激活按钮，
.菜单按钮：悬停{
背景色：#E0962D；
}
#主要{
背景颜色：绿色；
顶部：25px；
左：25px；
右：25px；
底部：25px；
位置：绝对位置；
}
#版权所有{
高度：20px；
宽度：自动；
显示器：flex；
对齐项目：居中；
字体系列：“codropsicons”，verdana；
字号：700；
文本转换：大写；
字体大小：10px；
颜色：#F7F7F7；
左边距：15px；
不透明度：0.1；
}

O nas
奥弗塔
加莱里亚
康塔克
试验

试验


Koyot©2017版权所有

在使用

位置：相对时，它不会忽略父项高度，它只是保留父项的填充，但除此之外，它会填充父项-请参阅我的代码片段。当然，当您为孩子的身高使用百分比值时，必须设置家长的身高


#主包装器{
flex:1自动；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
盒影：0 1px4pRGBA（0,0,0,0.6）；
填充：25px；
背景颜色：黄色；
高度：200px；
}
#主要{
背景颜色：绿色；
身高：100%；
宽度：100%；
位置：相对位置；
}

一些内容
1.移除
位置：绝对来自
#main

绝对定位的项目是“流外”。将父元素设置为相对将修改绝对子元素的边界框到其自身的高度和宽度，但不考虑填充

2.更改包装的
对齐项目：居中到
对齐项目：拉伸

在我看来，你不想让孩子在中间垂直对齐，而要占据包装纸的整个高度。代码>对齐项目：拉伸
将应用此行为



/*标记*/
身体，
html{
身高：100%；
保证金：0；
填充：0；
}
/*标签末尾*/
/*包装纸*/
#包装体{
身高：100%；