Как разместить дочерний элемент в нижней части фиксированной позиции родителя

Question

Я пытаюсь получить #needQuoteWrap в нижней части #sideContactWrap. #sideContactWrap является фиксированным элементом. Я не уверен, что я делаю неправильно. Я положил внутренний контейнер с position:relative и height:100%.

Я попытался сделать #needQuoteWrap как position:absolute, но когда я это сделаю, оно исчезнет.

Кто-нибудь знает, как я могу получить #needQuoteWrap в нижней части #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 до #needQuoteWrap работает как положено.

#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

Измените элемент #needQuoteWrap на position: absolute;. Дочерние элементы являются относительными по отношению к родителю, когда родительский элемент имеет положение, отличное от static (по умолчанию).

Пример ниже показывает, что теперь он внизу.

#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>