Question

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

我在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

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

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

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

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”中的三个均为自动，请将“ top”设置为静态位置并应用下面的规则编号三。

如果三个都不是'auto'：如果'margin-top'和'margin-bottom'都是'auto'，则在额外的约束下求解方程，使两个边界的值相等。如果“ margin-top”或“ margin-bottom”之一为“ auto”，则求解该值的方程式。如果值过于受限，则忽略“底部”的值并求解该值。

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

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

4 个答案: