Html flex容器中居中的元素正在增长并溢出顶部
我一定是忘记了垂直和水平居中flexbox的一些基本功能 容器位于具有垂直滚动的父容器内,当容器变得太高时,它会超出父容器顶部,从而剪切内容。底部保持不变 尝试调整视图的高度或添加更多线以查看其实际效果Html flex容器中居中的元素正在增长并溢出顶部,html,css,flexbox,Html,Css,Flexbox,我一定是忘记了垂直和水平居中flexbox的一些基本功能 容器位于具有垂直滚动的父容器内,当容器变得太高时,它会超出父容器顶部,从而剪切内容。底部保持不变 尝试调整视图的高度或添加更多线以查看其实际效果 body, html{ 身高:100%; 宽度:100%; 保证金:0; } * { 框大小:边框框; } #包装纸{ 背景:灰色; 身高:100%; 宽度:100%; 最大高度:100%; 显示器:flex; 溢出y:自动; 对齐项目:居中; 证明内容:中心; } #盒子{ 利润率:30px
body,
html{
身高:100%;
宽度:100%;
保证金:0;
}
* {
框大小:边框框;
}
#包装纸{
背景:灰色;
身高:100%;
宽度:100%;
最大高度:100%;
显示器:flex;
溢出y:自动;
对齐项目:居中;
证明内容:中心;
}
#盒子{
利润率:30px0;
背景:白色;
边框:1px实心#dfdfdf;
}
一线
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
最后一行
我认为您在box类中设置了扩展容器高度的顶部边距。您可以将其设置为padding而不是margin。希望这有帮助。谢谢 我认为您想要的是使您的flex项目(#box
)具有高度,并将其设置为溢出,而不是flex容器。另外,要在上面和下面添加30px,我会删除框中的边距,而是在容器中添加填充物
因此,更新后的样式如下所示:
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0; /*added*/
}
#box {
background: white;
border: 1px solid #dfdfdf;
overflow-y: auto; /*added*/
height: 100%; /*added*/
}
body,
html{
身高:100%;
宽度:100%;
保证金:0;
}
* {
框大小:边框框;
}
#包装纸{
背景:灰色;
身高:100%;
宽度:100%;
最大高度:100%;
显示器:flex;
对齐项目:居中;
证明内容:中心;
填充:30px0;
}
#框{
背景:白色;
边框:1px实心#dfdfdf;
溢出y:自动;
身高:100%;
}
一线
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
最后一行
您什么也没忘,只是需要了解发生了什么。首先你把包装纸做成屏幕的100%高度,然后把盒子垂直和水平居中。当盒子有很大的高度时,你会有这样的东西:
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0; /*added*/
}
#box {
background: white;
border: 1px solid #dfdfdf;
overflow-y: auto; /*added*/
height: 100%; /*added*/
}
现在,当您添加overflow-y:auto
时,您将创建一个滚动条,该滚动条将从包装的顶部开始,直到底部溢出的内容。所以它将是这样的:
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0; /*added*/
}
#box {
background: white;
border: 1px solid #dfdfdf;
overflow-y: auto; /*added*/
height: 100%; /*added*/
}
这就是为什么您可以滚动到底部以查看底部而无法查看顶部的原因
为了避免这种情况,请使用margin:auto
将元素居中,在这种情况下,我们将有两种情况:
box height
时,由于margin:auto
的缘故,我们将使空间均匀分布在每一侧,因此您的元素将居中李>
box height>wrapper height
时,我们将有正常的行为,您的元素将溢出,并且其顶边将粘附到wrapper的顶边body,
html{
身高:100%;
宽度:100%;
保证金:0;
}
* {
框大小:边框框;
}
#包装纸{
背景:灰色;
身高:100%;
宽度:100%;
最大高度:100%;
填充:30px0;
显示器:flex;
溢出y:自动;
}
#盒子{
保证金:自动;
背景:白色;
边框:1px实心#dfdfdf;
}
一线
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
最后一行
谢谢。不幸的是,我不希望框滚动,而是希望周围的包装。谢谢,但这不会改变行为。哇-我永远不会想出这个解决方案。虽然你的解释很有帮助,但我不太清楚为什么边距:自动修复这个问题。您还可以提供其他解释吗?谢谢您的帮助。@Jeppebm margin:auto是flex的魔力之一;)当您设置“自动”时,意味着在使元素居中的每一侧分割相等的边距。。。非常类似边距:具有固定宽度的块元素的自动。。。当高度较大时,没有余量,因此它将是无用的,你有正常的行为