Css 位置：绝对并填充div中的剩余空间

请查看以下配置：

我希望我的

#right

div以预定义的宽度保留在屏幕的右侧，我希望我的

#left

div填充剩余的空间。请注意，

#imagetag

需要保持在filler div的右下角，而无需手动定位

请注意，这不是重复的-这里提供的所有解决方案都要求“filler”div没有position属性-但是我需要

position:absolute

属性使

overflow:hidden

在我的案例中正常工作（如您所见，包含的图像比容器大-需要隐藏）

---

接受建议。

在

#right

元素上添加

float:right

，并在

#left

元素上添加

float:left

另外，

#left

和

#right

元素的宽度应总共共享100%

在

#image

元素上将宽度和高度设置为100%。然后在

背景大小：130%

上应用图像大小

---

编辑以前的答案，因此评论可能不是最新的。

变化：

#left {
  position: absolute;
  height: 100%;
  overflow: hidden;
  width: calc(100% - 200px);
}

#right {
  background-color: pink;
  width: 200px;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 100;
}

并将图像标签移动为“左”和“右”框的容器

参见小提琴：

---

在这种情况下，您需要使用定位。这是一种以下情况：

+-------+-----------+
| FIXED | FLUUUUUID |
+-------+-----------+

或

固定流体模型。在我的代码片段中，我演示了两种示例。在第一种情况下，流体的大小较小。而在第二种情况下，内容太长

片段

.parent{位置：相对；边距：0 0 15px；边框：1px实心#999；填充：5px；左填充：100px；}
.parent.fixed{位置：绝对；左侧：5px；宽度：90px；背景色：#99f；}
.parent.fluid{背景色：#f99；}

固定的
流质
固定的
液体知识是一种美德，是一种美德，是一种美德，是一种生命的源泉，是一种明确的时间，是一种非官方的智慧，是一种智慧的源泉。

添加

在

#右侧

，然后在

#左侧

---

我不知道您希望支持哪些浏览器，但我的目标是flexbox

对flexbox的浏览器支持

在flexbox中，您可以将最小值和最大值宽度设置为div，并在其旁边响应

将进位设置为flex

#carry {
   display: flex; 
};

左边是弯曲的，右边只增加一个宽度

#left {
  flex: 1;
}
#right {
  background-color: pink;
  max-width: 200px;
  min-width: 200px; 
  height: 100%;
  flex: 1;
}

---

---

如果您想知道flexbox还能检查哪些更棒的东西，请参见

这不起作用-imagetag div会留在后面。对不起，我的错。误解了您的问题：）谢谢您的努力-但是使图像100%宽度和高度会改变其行为。我需要图像更大，并且溢出：隐藏以显示它的一部分（如原始示例中所示）最后一步：）。。在那之后我就没主意了，对不起。。哦，下面已经提到了。。那我很抱歉这个@Mia怎么样？这解决了你的问题吗？我更新了我的答案，它实际上是一个副本。但现在还没关。看看我的答案<代码>：）这就是你想要的吗@PraveenKumar否，请注意图像行为的变化。未发生任何变化。它处于相同的位置。你到底想达到什么目的？@PraveenKumar如果你检查我的原始示例图像是否比携带它的div大。因此，它被溢出截断：hiddenThis不能解决问题-宽度不能“填充”-“#imagetag”保持滞后-这实际上根本不是一个解决方案。链接中到底发生了什么？它甚至没有得到正确元素的真实宽度-无用的建议。很多事情-从：div没有自动缩放，有90%是你输入的manually@Mia，您希望“左”和“右”共有100%的宽度，因为它们是“carry”的子对象。#图像是#左的子图像，其作用是作为背景，缩放图像时应根据背景大小而不是宽度和高度进行；通过这种方式，它可以保持响应速度。你需要清楚你想要达到的目标。你能在我的例子中演示一下吗？我在上面解释的图像问题不允许以同样的方式工作。我是-我在上面回答你-请注意图像行为的变化-这不是我想要的。图像需要保持裁剪（由溢出）正是@Mia，没有发生任何事情。它处于相同的位置。你到底想实现什么？这也改变了形象。请检查实际链接-图像被裁剪并且比div大。@Mia使用

背景大小：在
div
上包含

，以解决HD bg图像过大的问题。我想要过大的尺寸谢谢，我正在寻找无弹性的解决方案

#carry {
   display: flex; 
};

#left {
  flex: 1;
}
#right {
  background-color: pink;
  max-width: 200px;
  min-width: 200px; 
  height: 100%;
  flex: 1;
}