Div占用整个剩余宽度

问题描述：

我有一个父div和2个div在里面。第一个孩子div是50px宽和100％高度。第二个孩子的div是100％的高度，我需要休息的宽度（100％ - 50px）我该怎么做？Div占用整个剩余宽度

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

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

宽度：calc（100％ - 50px）; – 2013-05-13 21:39:51

最好的方法来做到这一点：http://stackoverflow.com/a/22719552/759452 – 2016-06-24 08:29:49

答

你的意思是说像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%; 
}

更新：

您还可以使用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% */ 
}

Demo 2

只是一个说明...具有“浮动”属性的元素必须在标记的顶部。 Alien先生的写作方式确实如此。 – 2013-09-25 18:28:12

作为小提琴：http://jsfiddle.net/F27sW/ – snappieT 2014-01-07 15:46:46

尝试了几个解决方案后，这一个工作最好！谢谢。 – 2014-05-28 16:02:09

答

您可以在right上添加50px的边距并浮动。

答

什么编辑正确的类，使它看起来像这样：

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

答

只要改变你的右手div来此：

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

这与旧版浏览器不兼容。请参阅http://caniuse.com/calc – Patrick 2014-02-12 10:27:07

答

你也可以与右侧的绝对位置工作柱。考虑这个例子：

.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占用整个剩余宽度

相关推荐