当位置：绝对应用时，底部0不起作用

Question

我不确定让我的div #buttonLine显示在#pdfBannerRight div底部的错误。

我已将height: 100%;应用于pdfButtonWrap和bottom:0以使div拉伸整个容器，然后将bottom:0应用于#buttonLine。 / p>

有人看到为什么#buttonLine没有显示在其容器的底部吗？

#pdfBannerRight {
	width: 50%;
	background: #2f2f2f;
	height: 450px;
	position: absolute;
	top: 20%;
	right: 0;
}
#pdfBannerRightCont {
	position: relative;
	width: 100%;
	height: 100%;
}
#pdfButtonWrap {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
}
#buttonLine {
	width: 80px;
	height: 143px;
	border-top: 4px solid #FFF;
	border-right: 4px solid #FFF;
  position: relative;
  bottom: 0;
}
.pdfSliderButton {
	text-decoration: none;
    display: block;
	margin: 8px 8px 8px 13px;
	color: #2f2f2f;
	background: #FFF;
	background: #b82222;
	font-size: 50px;
	vertical-align: middle;
	outline: none;
	border: none;
	cursor: pointer;

<div id="pdfBannerRight">
					<div id="pdfBannerRightCont">
						<div id="pdfButtonWrap">
							<div id="buttonLine">
								<button type="button" class="previous pdfSliderButton" id="slickPrev" role="button" data-role="none">&#8249;</button>
								<button type="button" class="next pdfSliderButton" id="slickNext" role="button" data-role="none">&#8250;</button>
							</div>
						</div>
					</div>
				</div>

Answer 1

您犯了一个错误，只需将position转到absolute，您的div将会移到底部。

#buttonLine {
  width: 80px;
  height: 143px;
  border-top: 4px solid #FFF;
  border-right: 4px solid #FFF;
  - position: relative;
  + position: absolute
  bottom: 0;
}