我如何有一个静态的高度/宽度侧边栏和底部栏,以及一个包含iframe的可响应的主要内容区域? [英] How do I have a static height/width sidebar and bottom bar with a respnsive main content area that houses an iframe?
本文介绍了我如何有一个静态的高度/宽度侧边栏和底部栏,以及一个包含iframe的可响应的主要内容区域?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想显示一个网页,它只是一个iframe,具有固定宽度的侧边栏和固定高度的底边栏.
I want to display a web page that is just an iframe, with a fixed width sidebar and a fixed height bottom bar.
它看起来像这样:
这是我现在无法使用的地方:
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>
任何帮助将不胜感激!
推荐答案
我会使用HTML5,但这不是制作布局的最佳方法,但是...
I would use HTML5 and this is not the best way to make the layout, but well...
这是jsfiddle: http://jsfiddle.net/JP3zW/
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;
}
这篇关于我如何有一个静态的高度/宽度侧边栏和底部栏,以及一个包含iframe的可响应的主要内容区域?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文