为什么不将div的“底部”值更改为“0”工作？

Question

为什么不将div的“底部”值更改为“0”工作？

我在css中有top:0并在javascript中用bottom:0替换它。 （如果我只是更改“顶部”值，那么它确实有效...） - 这是代码：

  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

将顶部设置为“自动”，以消除任何先前的规格

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

Answer 2

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 3

以下是the specification的相关部分：

对于绝对定位的元素，垂直维度的使用值必须满足此约束：

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

如果'top'，'height'和'bottom'都是auto，则将'top'设置为静态位置并在下面应用规则3。

如果这三个都不是'auto'：如果'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'，然后将'margin-top'和'margin-bottom'的'auto'值设置为0，并解决'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>