我只有一个页面,其中仅包含垂直和水平居中的卡片。卡片中包含表格和一些文本。用户将提交表单并获得列表。有时,列表会很长,并且卡的顶部会被切断,无法滚动。无论如何,有没有让它撞到顶部而不会溢出?我尝试使用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/

10-11 23:34
查看更多