min-height causes padding to be ignored
kmgt is correct in that card-block
is messing up your sizing. Keep in mind that height: 100%
is not calculating for the remaining height. Percentage is pretty complicated, but long story short, the most reliable way to use it with respect to the parent container. The interaction between card-block
and the min-height: 50px
is what is messing up your styling.
Anyone is more than welcome to chime in, but I personally do not reliably know what is exactly going on. That being said, the solution is flexbox
. Make the parent flex
and give card-block
, the element that needs to occupy the rest of the parent's container size, a flex-grow: 1
.
html,
body {
height: 100%;
}
.card {
height: 100%;
display: flex;
flex-direction: column;
}
.card-header {
min-height: 50px;
}
.card-block {
flex-grow: 1;
}