如何将子元素放置在固定位置父级的底部

Question

我试图让#needQuoteWrap位于#sideContactWrap的底部。 #sideContactWrap是一个固定元素。我不确定我做错了什么。我放了一个带有position:relative和height:100%的内部容器。

我尝试将#needQuoteWrap设为position:absolute，但当我这样做时，它会消失。

有谁知道我如何在#needQuoteWrap的底部获得#sideContactWrap？

Jsfiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将#needQuoteWrap元素更改为position: absolute;。当父级的位置设置为static以外的任何位置时（默认值），子元素与父级元素相关。

以下示例显示它现在位于底部。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

position:absolute到#needQuoteWrap正在按预期工作。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;