1

我想显示一个网页,它只是一个 iframe,具有固定宽度的侧边栏和固定高度的底栏。

它看起来像这样:在此处输入图像描述

这是我现在所在的位置,它不起作用:

<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>

任何帮助将非常感激!

4

2 回答 2

1

我会使用 HTML5,这不是制作布局的最佳方式,但是...

这是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;
}
于 2013-06-20T00:03:09.930 回答
0

看起来你的代码工作得很好。您正在测试什么浏览器/版本?某些浏览器(如 Firefox)要求您在高度之外设置“最小高度”,以使某些元素正确显示。Internet Explorer 在 CSS 方面也存在许多问题。请提供更多上下文。

于 2013-06-20T01:15:36.483 回答