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

debugcn 发表于 Dev

保罗

我正试图#needQuoteWrap成为#sideContactWrap. #sideContactWrap是固定元素。我不确定我做错了什么。我用position:relative和放了一个内容器height:100%。

我试过 make #needQuoteWrapas position:absolute，但是当我这样做时它消失了。

有谁知道我怎样才能到达#needQuoteWrap底部#sideContactWrap？

提琴手

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

用户7236046

将#needQuoteWrap元素更改为 have 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。