Question

我有一个位置：绝对div元素，其位置仅在运行时已知，我希望它保持其左侧位置但向屏幕边缘延伸。换句话说，我想将div的宽度设置为屏幕宽度减去“left”的值：

.mydiv {
   position: absolute;
   width: calc(100% - left);
}

以上尝试访问“left”的值已被证明是不成功的。

当我将“右”设置为零时，像这样，一个窄的div被移动到右边的屏幕边缘，但是不会保持左边的位置，否则它会：

.mydiv {
   position: absolute;
   right: 0;
}

我想保持“左”位置，并将div扩展到右侧屏幕边缘。

有办法吗？

Answer 1

不要设置它的宽度！

如果div的父母说body ...只需添加：

right: 0;

示例：

＆＃13;

/*QuickReset*/*{margin:0;box-sizing:border-box;}


.mydiv {
  position: absolute;
  right: 0; /* tyadaa! */
  height: 20px;
}

#one {
  left: 78px; /* or unknown */
  background: red;
  top: 50px;
}

#two {
  left: 26%; /* or unknown */
  background: blue;
  top: 90px;
}

＆＃13;

<div id="one" class="mydiv"></div>
<div id="two" class="mydiv"></div>

＆＃13;

CSS：设置宽度div以匹配屏幕边缘

1 个答案: