如何使绝对定位的 div 具有与其父元素相等的宽度，减去一些边距？

Question

我想在不同大小的容器中放置一个内部div，该内部div从固定左边位置开始，然后宽度填满整个容器。我在下面包含了一些示例CSS以尝试传达这一点。

由于必须使用绝对定位，因此不能只使用右浮动和设置左边距。有没有办法使用绝对定位使其起作用？我还尝试过width：auto和一些不同的box-sizing选项。

需要澄清的是，这种技巧的棘手之处在于左边框必须是固定的，并且左边框必须与容器的右边框相邻。我不能使用position：relative和JavaScript，但在这样做之前，我可能会先制作具有硬编码宽度的.inner1和.inner2 divs。但希望避免这种情况。

.container1 {
  position: relative;
  width: 400px;
  height: 300px;
}

 .container2 {
  position: relative;
  width: 500px;
  height: 300px;
}

.inner {
  position: absolute;
  top: 0px;
  left: 200px;
  height: 100%;
  width: 100%;
}

- Jeremy Smith

---

你可以使用JavaScript吗？ - Senad Meškin

不需要在JavaScript中这样做。下面的所有示例都是使用CSS。 - tkone

Answer 1

只需指定所有的top、left、bottom和right属性，该框就会展开到这些点的位置。

.container {
  position: relative;
  width: 400px;
  height: 300px;
}

.inner {
  position: absolute;
  top: 0;
  left: 200px;
  bottom: 0;
  right: 0;
}

查看 jsFiddle。

- animuson

---

很酷，所以0值基本上告诉浏览器使用默认值？ - Jeremy Smith

@Jeremy：不，它告诉它将盒子从顶部和底部分别定位为0长度，本质上将盒子从上到下拉伸。从左边200px处和右边0长度的指令会将盒子从左边200px的位置一直拉伸到右边。不指定两边的话，它会基于盒子内容创建的宽度和/或高度来使用。请注意，您不需要为0指定"px"。无论使用哪种测量单位，0始终是0，因此我们可以安全地只使用0。 - animuson

Answer 2

我很抱歉，我不太明白您需要什么，但为什么不使用百分比呢？

而不是：

.inner {
  position: absolute;
  top: 0px;
  left: 200px;
  height: 100%;
  width: 100%;
}

为什么不使用类似以下的东西：

为什么不使用这样的东西：

.inner {
  position: absolute;
  top: 0px;
  left: 50%;
  height: 100%;
  width: 50%;
}

根据左侧和宽度属性设置百分比，例如40-60，30-70等。

希望这能帮到您。如果还有疑问，请具体说明。

祝好！

- haZard0us

Answer 3

这个可以用。将外框的宽度改为您想要的任何大小，内框会自动适应。

.container {
    width: 400px;
    height: 300px;
} 

.inner {
    position: relative;
    margin-left: 200px;
    height: 100%;
}

编辑：这里有一个fiddle

- tkone

---

他问如何使用绝对定位实现它。 - JackHasaKeyboard