How to position a child element at the bottom of a fixed position parent

Question

I am attempting to get #needQuoteWrap to be at the bottom of the #sideContactWrap. #sideContactWrap is a fixed element. I'm not sure what I am doing wrong. I put an inner container with position:relative and height:100%.

I have tried making #needQuoteWrap as position:absolute, but when I do that it disappears.

Does anyone know how I can get #needQuoteWrap at the bottom of #sideContactWrap?

Jsfiddle

#sideContactWrap {
	background: #EDEDED;
	width: 30%;
	height: 100vh;
	position: fixed;
	box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
	padding: 20px 0;
}
#sideContactInner {
	height: 100%;
	width: 100%;
	position: relative;
}
.sideBlock {
	width: 90%;
	margin-bottom: 15px;
	padding: 0 5%;
	height: auto;
	border: 1px solid red;
	text-align: left;
}
.sideBlockText {
	margin: 0;
}
#needQuoteWrap {
	width: 100%;
	height: 100px;
	position: relative;
	bottom: 0;
	right: 0;
	border: 1px solid red;
}
#needQuote {
	height: 100px;
	width: 100%;
	background: #b82222;
	text-decoration: none;
	color: #FFF;
}

<div id="sideContactWrap">
  <div id="sideContactInner">
    <div class="sideBlock">
      <h2 class="secTitle">Contact Info</h2>
    </div>
    <div class="sideBlock">
      <p class="dG sideBlockText">address</p>
    </div>
    <div class="sideBlock">
      <p class="dG sideBlockText">Toll Free</p>
    </div>
    <div class="sideBlock">
      <p class="dG sideBlockText">Office Hours: Monday - Friday 8:00 am - 5:00 pm EST</p>
    </div>
    <div id="needQuoteWrap">
      <a href="#">
        <div id="needQuote">Need a quote?</div>
      </a>
    </div>
  </div>
</div>

Answer 1

position:absolute to #needQuoteWrap is working as expected.

#sideContactWrap {
  background: #EDEDED;
  width: 30%;
  height: 100vh;
  position: fixed;
  box-shadow: -9px 0px 9px 1px rgba(0, 0, 0, .2);
  padding: 20px 0;
}

#sideContactInner {
  height: 100%;
  width: 100%;
  position: relative;
}

.sideBlock {
  width: 90%;
  margin-bottom: 15px;
  padding: 0 5%;
  height: auto;
  border: 1px solid red;
  text-align: left;
}

.sideBlockText {
  margin: 0;
}

#needQuoteWrap {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  right: 0;
  border: 1px solid red;
}

#needQuote {
  height: 100px;
  width: 100%;
  background: #b82222;
  text-decoration: none;
  color: #FFF;
}

<div id="sideContactWrap">
  <div id="sideContactInner">
    <div class="sideBlock">
      <h2 class="secTitle">Contact Info</h2>
    </div>
    <div class="sideBlock">
      <p class="dG sideBlockText">address</p>
    </div>
    <div class="sideBlock">
      <p class="dG sideBlockText">Toll Free</p>
    </div>
    <div class="sideBlock">
      <p class="dG sideBlockText">Office Hours: Monday - Friday 8:00 am - 5:00 pm EST</p>
    </div>
    <div id="needQuoteWrap">
      <a href="#">
        <div id="needQuote">Need a quote?</div>
      </a>
    </div>
  </div>
</div>

Answer 2

Change the #needQuoteWrap element to have position: absolute;. Child elements are relative to the parent when the parent has a position set to anything other than static (the default).

The below example shows it's now at the bottom.

#sideContactWrap {
	background: #EDEDED;
	width: 30%;
	height: 100vh;
	position: fixed;
	box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
	padding: 20px 0;
}
#sideContactInner {
	height: 100%;
	width: 100%;
	position: relative;
}
.sideBlock {
	width: 90%;
	margin-bottom: 15px;
	padding: 0 5%;
	height: auto;
	border: 1px solid red;
	text-align: left;
}
.sideBlockText {
	margin: 0;
}
#needQuoteWrap {
	width: 100%;
	height: 100px;
	position: absolute;
	bottom: 0;
	right: 0;
	border: 1px solid red;
}
#needQuote {
	height: 100px;
	width: 100%;
	background: #b82222;
	text-decoration: none;
	color: #FFF;
}

<div id="sideContactWrap">
  <div id="sideContactInner">
    <div class="sideBlock">
      <h2 class="secTitle">Contact Info</h2>
    </div>
    <div class="sideBlock">
      <p class="dG sideBlockText">address</p>
    </div>
    <div class="sideBlock">
      <p class="dG sideBlockText">Toll Free</p>
    </div>
    <div class="sideBlock">
      <p class="dG sideBlockText">Office Hours: Monday - Friday 8:00 am - 5:00 pm EST</p>
    </div>
    <div id="needQuoteWrap">
      <a href="#">
        <div id="needQuote">Need a quote?</div>
      </a>
    </div>
  </div>
</div>