时间戳

首页 > 解决方案 > 如何将子元素定位在固定位置父元素的底部

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

问题描述

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

我试过制作#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>

标签： htmlcss

解决方案

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

推荐阅读