为什么将 div 的 "bottom" 值更改为“0”不起作用？

Question

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

  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

将顶部设置为 "auto"，以消除任何先前的规范

<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的相关部分：

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.

所以基本上，如果您设置所有值（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' 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>

为什么将 div 的 "bottom" 值更改为“0”不起作用？

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

html

javascript

css

position

css-position