Почему не работает изменение «нижнего» значения div на «0»?

Question

Почему не меняется "нижнее" значение div на "0"?

У меня есть top:0 в css и я заменяю его на bottom:0 в javascript.(Если я просто изменю «верхнее» значение, тогда оно сработает ...) - Вот код:

  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

Свойство top по-прежнему равно нулю - не установлено , одновременно используется top: unset - см. Демонстрацию ниже:

(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

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>

Answer 3

Вот соответствующая часть из спецификации :

Для абсолютно позиционированных элементов используемые значения вертикальных размеров должны удовлетворять этому ограничению:

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

Если все три из «top», «height» и «bottom» являются автоматическими, установите «top» в статическое положение и примените правило номер три ниже.

Еслини один из трех не является «автоматическим»: если оба параметра «margin-top» и «margin-bottom» имеют значение «auto», решите уравнение с дополнительным ограничением, согласно которому два поля получают равные значения.Если один из 'margin-top' или 'margin-bottom' равен 'auto', решите уравнение для этого значения.Если значения чрезмерно ограничены, игнорирует значение «bottom» и решает для этого значения.

Таким образом, в основном, если вы установите все значения (top,bottom, height) браузер решит игнорировать нижний.

Вам нужно сделать верхнее значение 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» означает «auto», «height» и «bottom» не являются «auto», затем установите «auto»значения для 'margin-top' и 'margin-bottom' равны 0, и решите для 'top'

Answer 4

Установите top на "auto", чтобы исключить любые предыдущие спецификации

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