Question

我有一个父div和2个div。第一个儿童div是50px宽和100％高度。第二个孩子的div是100％的高度，我要采取其余的宽度（100％ - 50px）我该怎么做？

这是我创建的小提琴：http://jsfiddle.net/muGty/ 基本上我想要蓝色div（右）完全占据灰色容器的其余部分。

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

Answer 1

你的意思是this吗？

<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

Answer 2

只需将您的右侧div更改为：

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

Answer 3

您可以向right添加50px的边距并浮动它。

Answer 4

如何编辑正确的课程，使其如下所示：

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

Answer 5

您也可以使用右侧列的绝对位置。考虑这个例子：

.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才能使其飞行。

Div占据整个剩余宽度

5 个答案: