将div放在绝对div的底部而不使用表或positoin：absolute

Question

我正在开发一个webapp，需要将div推到另一个绝对定位的div的底部。我尝试了bottom: 0和vertical-align: bottom但两个都没有工作。有没有办法将div移动到其父div的底部使用我可能没想过的CSS或者可以使用JavaScript完成的某种解决方法？

＆＃13;

＆＃13;

#wrapper {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.5); 
	z-index: 1000;
}
#outer {
    margin-left: 12.5%;
    margin-right: 12.5%;
    margin-top: 5%;
    margin-bottom: 5%;
    width: 75%;
    height: 75%;
    background: rgb(0, 0, 0);
    z-index: 1001;
}
#a {
    position: absolute;
    width: inherit;
    height: 100%;
}
#inner {
    bottom: 0;
    background-color: white;
}
.invert {
    color:white;
}
.revert {
    color:black;
}
.text-center {
    text-align:center;
}

＆＃13;

<div id="wrapper">
    <div id="outer" class="invert">
        <div id="a">
             <h3 class="text-center">Words!</h3>
             <h4 class="text-center">0 - 0</h4>
            <div id="inner">
                <span class="revert">This needs to be at the bottom</span>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

见下面的代码。另外，请阅读MDN上的position媒体资源。

#wrapper {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.5); 
	z-index: 1000;
}
#outer {
    position: relative; /* <-- add this -------------- */
    margin-left: 12.5%;
    margin-right: 12.5%;
    margin-top: 5%;
    margin-bottom: 5%;
    width: 75%;
    height: 75%;
    background: rgb(0, 0, 0);
    z-index: 1001;
}
#a {
    position: absolute;
    width: inherit;  /* <-- change this -------------- */
    width: 100%; /* <-- to this -------------- */
    height: 100%;
}
#inner {
    position: absolute; /* <-- add this -------------- */
    width: 100%; /* <-- add this -------------- */
    bottom: 0;
    background-color: white;
}
.invert {
    color:white;
}
.revert {
    color:black;
}
.text-center {
    text-align:center;
}

<div id="wrapper">
    <div id="outer" class="invert">
        <div id="a">
             <h3 class="text-center">Words!</h3>
             <h4 class="text-center">0 - 0</h4>
            <div id="inner">
                <span class="revert">This needs to be at the bottom</span>
            </div>
        </div>
    </div>
</div>