html - Force Item To Bottom Of Page Except for Margin

Question

I have a really simple question: How do I force a div to have the largest height it can, while keeping some padding on the bottom. Normaly, I would use:

min-height: 100%;

However this completely removes any margin at the bottom of the div (The div always reaches ALL the way to the bottom). I need a small amount of margin at the bottom, however no amount margin-bottom will change that. I could make the min-height something like 90%, but I really want the margin bottom to be a fixed value (15px). Is there any way to do this?

question from:https://stackoverflow.com/questions/66047906/force-item-to-bottom-of-page-except-for-margin

Answer 1

You can use calc(100% - [margin-bottom]) like so:

div{
  background-color:red;
  min-height:calc(100% - 5em);
  margin-bottom:5em;
}
html, body{
  height:100%;
}

<div></div>