Css: Position element by it's bottom relative to it's container's top

Question

I have an div element with variable height which I need to be positioned by it's bottom relative to the containers top.

This must be done without changing the html.

e.g.

<div id="container">
    <h1>Some Text<br/>more...</h1>
</div>

h1's bottom should be 100px below #container's top.

Thanks a lot

EDIT:

So by Request what I did (or didn't) tried:

• Searching with Google for css bottom top position relative but that's not the best search terms in the world...
• Normally I would put a container around h1 and give it a height of 100px but then I would need to change the html and that I can't
• using bottom: somevalue but that positions the element's bottom relative to the container's bottom.
• slain some vampires

Answer 1

You could make use of transform: translateY(-100%), to make the bottom of the element relative when you apply margin-top: 100px to h1.

#container {
  width: 200px;
  height: 200px;
  background: tan;
  overflow: hidden;
}
#container h1 {
  transform: translateY(-100%);
  margin-top: 100px;
  background: papayawhip
}

<div id="container">
  <h1>Some Text<br/>more...</h1>
</div>

Answer 2

Depending on browser support requirements:

#container {
    position: relative;
}

#container h1 {
    position: absolute;
    bottom: calc(100% - 100px);
}

Example