Div占据整个剩余宽度 [英] Div to take up entire remaining width

问题描述

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

I have a parent div and 2 divs inside it. First child div is 50px wide and 100% height. Second child div is 100% height and I it to take rest of the width ( 100% - 50px ) how do I do that?

ve created： http://jsfiddle.net/muGty/
基本上我想要蓝色div（右）占据其余的

Here is the fiddle that I've created: http://jsfiddle.net/muGty/ Basically I want blue div (right ) to occupy rest of the grey container completely.

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

推荐答案

您的意思是 此 ？

Do you mean like 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（）属性，这将缓解此过程，如

You can also use calc() property in CSS3, which will ease up this process like

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

这篇关于Div占据整个剩余宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！