Question

请查看以下配置：

http://codepen.io/anon/pen/mJYLpe?editors=110

我希望我的#right div以预定义的宽度停留在屏幕右侧，我希望我的#left div填充剩余空间。请注意，#imagetag需要保留在填充div的右下角，而无需手动定位。

请注意，这不是重复 - 此处提供的所有解决方案都要求“填充”div没有位置属性 - 但我需要position:absolute属性才能生成{ {1}}适合我的情况（因为你可以看到包含的图像比容器大 - 它需要隐藏）

接受建议。

Answer 1

添加

position: absolute;
right: 0;

<{1>}上的

然后在#right上使用calc(100% - 200px) http://codepen.io/anon/pen/oXRdPv?editors=110

Answer 2

根据上一个答案进行编辑，因此评论可能不是最新的。

的变化：

#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;
}

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

见小提琴： http://codepen.io/anon/pen/NqVzNY?editors=110

Answer 3

您需要在这种情况下使用定位。这是一个案例：

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

或者

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

固定流体模型。在我的片段中，我演示了两种示例。在第一种情况下，流体的尺寸较小。接下来的内容太长了。

<强>段

＆＃13;

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;}
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;}
.parent .fluid {background-color: #f99;}

＆＃13;

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid</div>
</div>

<div class="parent">
  <div class="fixed">Fixed</div>
  <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div>
</div>

＆＃13;

Answer 4

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

对flexbox的浏览器支持 http://caniuse.com/#feat=flexbox

在flexbox中，您可以将 min 和 max 宽度设置为div，然后在它旁边显示响应

http://codepen.io/anon/pen/NqVzpz?editors=110

将进位设为flex

#carry {
   display: flex; 
};

左边弯曲，只向右边加一个宽度

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

如果你知道什么更酷的东西flexbox能够检查这个https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

在float: right元素上添加#right，并在float: left元素上添加#left。

此外，#left和#right元素的宽度应共享100％。

在#image元素上将宽度和高度设置为100％。然后在background-size: 130%上应用图像的大小。

http://codepen.io/anon/pen/NqVMOv?editors=110

position：绝对并填充div中的剩余空间

5 个答案: