作者：消失得珍贵_Cjh_662 | 来源：互联网 | 2022-12-24 14:13
我必须忘记我的垂直和水平居中的flexbox的基本内容.
容器位于具有垂直滚动的父级内,当容器变得太高时,它会超出父级顶部,剪切内容.底部保持不变.
尝试调整视图的高度或添加更多行以查看其运行情况.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
display: flex;
overflow-y: auto;
align-items: center;
justify-content: center;
}
#box {
margin: 30px 0;
background: white;
border: 1px solid #dfdfdf;
}
First line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
Last linje
如何防止它被剪裁？另外,我试图在容器上方和下方有30px的边距.
谢谢!
1> Temani Afif..：
你忘记了什么,但你只需要了解发生了什么.首先,你使你的包装器的屏幕高度为100%,然后让盒子垂直和水平居中.当盒子有一个很大的高度你会有这样的东西:
现在,当您添加时,overflow-y: auto您将创建一个从包装器顶部开始直到底部溢出内容的滚动.所以它会是这样的:
这就是为什么你能够滚动到底部看到底部而不能看到顶部的原因.
为避免这种情况,请使用margin:auto中心元素,在这种情况下,我们将有两种情况:
当box-height 我们将每个侧面的空间均匀分布时,因为margin:auto你的元素会像预期的那样居中.
当box-height > wrapper-height我们将具有正常行为时,您的元素将溢出并且其上边缘将粘附到包装器的顶部边缘.
您可能也会注意到水平方向会发生同样的情况,这就是为什么我会使用边距在两个方向上居中.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
* {
box-sizing: border-box;
}
#wrapper {
background: grey;
height: 100%;
width: 100%;
max-height: 100%;
padding:30px 0;
display: flex;
overflow-y: auto;
}
#box {
margin: auto;
background: white;
border: 1px solid #dfdfdf;
}
First line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
Last linje
京公网安备 11010802041100号