How to set the iframe height & width to 100%

Question

I am in need of doing the following:

1. I have a header content which is 70px and an iframe with a wrapper. The height & width of the iframe has to be set to

Answer 1

CSS only solution for 100% width and height and responsive

HTML

CSS

html,body {
    height:100%;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

DEMO

without position : absolute

css

html,body        {height:100%;}
.h_iframe iframe {width:100%; height:100%;}
.h_iframe {
    height: 100%;
}

DEMO 2

And finally here is the crack

Modern browsers now support the:

width: calc(100% - 70px);

CSS

html,body {
    height:100%; 
    margin-top:0; 
    margin-bottom:0;
}
.h_iframe iframe {
    width:100%;
    height:calc(100% - 75px);
}
.h_iframe {
    height: 100%;
}
.element{
    width:100%;
    height:70px;
    background:red;
}

HTML

    
here it goes
    

        
    

Final DEMO