javascript - Position a div at the bottom of an absolute div without using tables or positoin:absolute -
i working on webapp needs div pushed bottom of absolutely positioned div. have tried bottom: 0
, vertical-align: bottom
neither of them working. there way move div bottom of parent div using css may not have thought of or sort of workaround 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 @ bottom</span> </div> </div> </div> </div>
see code below. also, read on 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 -------------- */ 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 -------------- */ width: 100%; /* <-- -------------- */ height: 100%; } #inner { position: absolute; /* <-- add -------------- */ width: 100%; /* <-- add -------------- */ 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 @ bottom</span> </div> </div> </div> </div>
Comments
Post a Comment