占据整个剩余宽度的Div

Question

我有一个父级div和两个子div。第一个子div宽度为50px，高度为100%。第二个子div高度为100%，我想使其占据剩余的宽度（100%-50px），该如何实现？

这是我创建的fiddle链接：http://jsfiddle.net/muGty/ 基本上，我希望蓝色的div（右侧）完全占据灰色容器的剩余部分。

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

- sublime

---

宽度：calc（100％-50px）; - Half_Baked

最佳实现方式：https://dev59.com/3m445IYBdhLWcg3waplH#22719552 - Adriano

Answer 1

你是指像这个一样吗？

<div id="left">
</div>
<div id="right">
</div>

CSS

html, body {
    height: 100%;
}

#left {
    width:200px;
    float:left;
    background: #f00;
    height: 100%;
}
#right {
    margin-left: 200px;
    background: #0f0;
    height: 100%;
}

更新：

您还可以在CSS3中使用calc()属性，这将使该过程更加轻松，例如：

html, body {
    height: 100%;
}

#left {
    width:200px;
    float:left;
    background: #f00;
    height: 100%;
}

#right {
    float: left;
    background: #0f0;
    height: 100%;
    width: calc(100% - 200px); /* Negate the fixed width element value from 100% */
}

Demo 2

- Mr. Alien

---

注意：具有“float”属性的元素必须在标记中处于顶部，就像Alien先生写的那样。 - Felipe Miosso

作为小提琴：http://jsfiddle.net/F27sW/ - snappieT

尝试了几种解决方案后，这个是最好的！谢谢。 - Smith Smithy

谢谢您的时间，您救了我的一天。 - Ahmed Mahmoud

Answer 2

只需将您的右侧 div 更改为以下内容：

.right{
    float:left;
    height:50px;
    width: calc(100% - 50px);
    background-color: blue;
    display:inline-block;
}

- Half_Baked

---

这与旧版浏览器不太兼容。请参见http://caniuse.com/calc - Patrick

Answer 3

关于编辑你的正确类，让它看起来像这样:

.right{
  float:left;
  height:50px;
  width: 100%;
  margin-right:-50px;
  background-color: blue;
  display:inline-block;
}

- RelevantUsername

Answer 4

你也可以使用右侧列的绝对定位。考虑以下示例：

.parent{
    width:100%;
    height:50px;
    background:#888;
    position:relative
}
.left{
    float:left;
    height:100%;
    width:50px;
    background:green
}
.right{
    background:red;
    position:absolute;
    bottom:0;
    left:50px;
    right:0;
    top:0
}

还可以看看这个Fiddle。请注意，您需要在父容器上设置position: relative才能实现此效果。

- ACJ

Answer 5

你可以给right添加50像素的外边距并浮动它。

- Daniel A. White