Внизу: 0 не работает, когда положение: абсолютное применение

Question

Я не уверен, что делаю неправильно, чтобы мой div #buttonLine отображался в нижней части #pdfBannerRight div.

Я применил height: 100%; к pdfButtonWrap и bottom:0чтобы получить div для растяжения всего контейнера, а затем применить bottom:0 к #buttonLine.

Кто-нибудь видит, почему #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;
}