9

我里面有一个父 div 和 2 个 div。第一个子 div 宽 50 像素,高 100%。第二个子 div 是 100% 高度,我要占用其余的宽度( 100% - 50px )我该怎么做?

这是我创建的小提琴:http: //jsfiddle.net/muGty/ 基本上我希望蓝色 div(右)完全占据灰色容器的其余部分。

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

5 回答 5

20

你的意思是这样吗?

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

更新:

您还可以calc()在 CSS3 中使用属性,这将简化此过程,例如

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% */
}

演示 2

于 2013-05-13T19:06:43.640 回答
1

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

.right{
    float:left;
    height:50px;
    width: calc(100% - 50px);
    background-color: blue;
    display:inline-block;
}
于 2013-05-13T21:39:08.407 回答
0

如何编辑你的正确类使其看起来像这样:

.right{
  float:left;
  height:50px;
  width: 100%;
  margin-right:-50px;
  background-color: blue;
  display:inline-block;
}
于 2013-05-13T19:07:49.633 回答
0

您可以添加 50px 的边距right并使其浮动。

于 2013-05-13T19:04:56.407 回答
0

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

.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在父容器上进行设置才能使其飞行。

于 2013-05-13T21:55:20.750 回答