我只有一个页面,其中仅包含垂直和水平居中的卡片。卡片中包含表格和一些文本。用户将提交表单并获得列表。有时,列表会很长,并且卡的顶部会被切断,无法滚动。无论如何,有没有让它撞到顶部而不会溢出?我尝试使用padding-top,但我不希望宽度影响百分比,并且固定值对于不同的屏幕尺寸都不好。
的CSS
html,
body {
height: 100%;
}
.container,
.row.justify-content-center.align-items-center {
height: 100%;
min-height: 100%;
}
完整示例:http://jsbin.com/madigarixu/edit?html,css,output
最佳答案
您可以改用min-height
。同样,固定式顶部导航栏也需要填充主体。使用calc从最小高度中减去此值,卡片将完美居中...
body {
padding-top:50px;
}
.container,
.row.justify-content-center.align-items-center {
min-height: calc(100vh - 50px);
}
http://codeply.com/go/pdqcX2t51x
关于css - bootstrap 4:将卡垂直和水平居中放置,但不要溅到屏幕外,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43883284/