使 div 以动态宽度填充父 div 的剩余水平空间

Question

I'm trying to make a div fill the remaining horizontal space of a parent div which has an dynamic width (based on screen width).

How can I achieve this with pure CSS? What I try to achieve is shown in the picture below ('Fillable space').

The code for the following example would currently be:

#wrap {
    width: 100%;
    float: left;

    #container {
        width: 100%;
        padding: 0px 30px;

        #static-div {
            width: 60px;
            height: 60px;
        }

        #fillable-space {
            /* What would my code be to fill the remaining space? */
        }
    }
}

Thanks in regards

Answer 1

i would use

width: calc( 100% - 60px );
float:left;

like i did in this fiddle: http://jsfiddle.net/74ovL80s/

and if you need to support legacy browsers look here to see if they support the calc function: http://caniuse.com/#feat=calc

Answer 2

If you need to support browsers that doesn't support css calc such as IE8, you can do like this.

 #wrap { height: 100px; width: 100%; } #container { width: 80%; padding: 0px 30px; height: 70px; background: grey; } #static-div { width: 60px; height: 60px; background: red; float: left; } #fillable-space { height: 60px; background: blue; margin-right: 60px; }

 <div id="wrap"> <div id="container"> <div id="static-div"> </div> <div id="fillable-space"> </div> </div> </div>