Why doesn't changing the “bottom” value of the div to “0” work?

Question

Why doesn't changing the "bottom" value of the div to "0" work?

I have top:0 in the css and replace it by bottom:0 in the javascript. (If I just change the "top" value then it does work...) - Here is the code:

  window.onload = function() { document.getElementById("main").style.top = ""; document.getElementById("main").style.bottom = "0"; }; 

 body { margin: 0; border: 0; padding: 0; } #all { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; border: 0; padding: 0; background-color: yellow; } #main { position: absolute; top: 0; left: 0; width: 100%; height: 70%; margin: 0; border: 0; padding: 0; background-color: green; } 

 <div id="all"> <div id="main"></div> </div> 

Answer 1

The top property is still zero - unset it using top: unset at the same time - see demo below:

 (function() { window.onload = function() { document.getElementById("main").style.top = "unset"; /* changed */ document.getElementById("main").style.bottom = "0"; } }()); 

 body { margin: 0; border: 0; padding: 0; } #all { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; border: 0; padding: 0; background-color: yellow; } #main { position: absolute; top: 0; left: 0; width: 100%; height: 70%; margin: 0; border: 0; padding: 0; background-color: green; } 

 <div id="all"> <div id="main"></div> </div> 

Answer 2

Set top to "auto", to eliminate any previous specifications

<script>
(function() {
    window.onload = function() {
        document.getElementById("main").style.top = "auto";
        document.getElementById("main").style.bottom = "0";
    }
}());
</script>

Answer 3

Here is the relevant part from the specification :

For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.

If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.

So basically, if you set all the values ( top , bottom , height ) the browser will decide to ignore the bottom one.

You need to make the top value auto

 document.getElementById("main").style.top = "auto"; document.getElementById("main").style.bottom = "0"; 

 body { margin: 0; border: 0; padding: 0; } #all { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; border: 0; padding: 0; background-color: yellow; } #main { position: absolute; top: 0; left: 0; width: 100%; height: 70%; margin: 0; border: 0; padding: 0; background-color: green; } 

 <div id="all"> <div id="main"></div> </div> 

'top' is 'auto', 'height' and 'bottom' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'top'

Answer 4

 document.getElementById("main").style.top = "initial"; document.getElementById("main").style.bottom = "0"; 

 body { margin: 0; border: 0; padding: 0; } #all { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; border: 0; padding: 0; background-color: yellow; } #main { position: absolute; top: 0; left: 0; width: 100%; height: 70%; margin: 0; border: 0; padding: 0; background-color: green; } 

 <div id="all"> <div id="main"></div> </div>