user3550879 user3550879 - 28 days ago 13
CSS Question

align bottom of div with no defined height

Trying to align the bottom of #top-btn to the top of the footer But I don'twant to define the height of #top-btn

html

<footer class="row">
<a id="top-btn" href="">...</a>
</footer


css

#top-btn {
position: absolute;
display: block;
z-index: 1000;
right: 50px;

bottom: ?;

text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 1.25em;
letter-spacing: 1px;
color: #fff;
padding: 16px 35px;
background-color: #d11e5d;
}

Answer

You may use relative/absolute:

footer {
  margin:2em;
  background:gray;
  position:relative;/* absolute child will use it as reference*/
  }
a {
  position:absolute;
  right:50px;
  bottom:100%;/* from its referent container, goes right on top of it, no matter parent's height's */
  background:yellow;
  }
<footer class="row">
    <a id="top-btn" href="">...</a>
  <p>some text here?</p>
</footer>
<footer class="row">
  <p>some text here?</p>
    <a id="top-btn" href="">...</a>
  <p>some text here?</p>
  <p>some text here?</p>
</footer>
  <footer class="row">
  <p>some text here?</p>
    <a id="top-btn" href="">...</a>
  <p>some text here?</p>
</footer

Comments