在不使用表格或positoin的情况下将div放在绝对div的底部：absolute

Question

I am working on a webapp that needs a div to be pushed to the bottom of another absolutely positioned div. I have tried bottom: 0 and vertical-align: bottom with neither of them working. Is there some way to move a div to the bottom of its parent div using CSS that I may not have thought of or some sort of workaround that could be done using JavaScript?

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

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

Answer 1

See code below. Also, read up on the position property on MDN .

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