How do I have a static height/width sidebar and bottom bar with a respnsive main content area that houses an iframe?

Question

I want to display a web page that is just an iframe, with a fixed width sidebar and a fixed height bottom bar.

It will look like this: enter image description here

This is where I'm at now, which doesn't work:

<style>
body {margin:0;overflow:hidden;background-color:#f4f4f4;}
#iframe {position:absolute;left:0px;top:0px; width:100%; height:100%; padding:0px 200px 100px 0px;}
#bars {width:100%;height:100%;}
#bottombar {width:100%; height: 100px; position: absolute; bottom: 0; background: grey}
#sidebar {width:200px; height: 100%; position: absolute; right: 0;background: grey}
</style>


<iframe id="iframe" name="iframe1" frameborder="0" height="100%" width="100%" src="http://someurl.com"></iframe>

<div id="bars">
     <div id="bottombar"></div>
     <div id="sidebar"></div>
</div>

Any help would be much appreciated!

It does not need to work on mobile – Alex Jun 20 '13 at 00:13 — Alex, Jun 20 '13 at 00:13

leoMestizo · Accepted Answer · 2013-06-20T00:08:33.807

1

I would use HTML5 and this is not the best way to make the layout, but well...

Here is the jsfiddle: http://jsfiddle.net/JP3zW/

/* In a Reset CSS */

body, div {
    margin: 0;
    padding: 0;
}

/* Style CSS */

html, body { height: 100%; }

body {
    position: relative;
    background: #F4F4F4;
}

iframe#iframe {
    width: calc(100% - 200px);
    height: calc(100% - 100px);
    overflow: hidden;
}

div#sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 200px;
    background: gray;
}

div#bottombar {
    bottom: 0;
    height: 100px;
    width: 100%;
    background: black;
}

edited Jun 20 '13 at 00:08

answered Jun 20 '13 at 00:03

leoMestizo

1,469
9
15

It works to me... Or you talk about your code? I thought that the problem was the calc function but in MDN tells that it has a basic support for all the browsers. PS: I made changes in the code above. Check it again or copy it again. – leoMestizo Jun 20 '13 at 00:22

score 0 · Answer 2 · answered Jun 20 '13 at 01:15

It looks like your code works just fine. What browser/version are you testing in? Some browsers like Firefox require you to set "min-height" in addition to height to get certain elements to display correctly. Internet Explorer also has many issues with CSS. Please provide more context.

How do I have a static height/width sidebar and bottom bar with a respnsive main content area that houses an iframe?

2 Answers2

Linked