html - 如何使绝对定位的 div 的宽度等于它的父级减去一些边距

Question

我想要一个位于不同大小的容器 div 内的内部 div，并从固定的左侧位置开始，然后具有填满容器其余部分的宽度。我在下面包含了一些示例 css 来尝试理解这一点。

我必须使用绝对定位，所以不能只向右浮动并设置左边距。关于如何使用绝对定位进行这项工作的任何想法？我还尝试了 width: auto 和一些不同的框大小选项。

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

.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%;
}

Answer 1

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

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

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

See the jsFiddle.