将iframe放在页脚部分上方。简单

时间:2014-01-20 13:33:17

标签: javascript html css iframe styles

我希望iframe位于具有一些内容的页脚部分之上。

我是一个真正的初学者,但我能够将一些代码废弃在一起。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test Layout</title>
    <style type="text/css">
      body, html {
        margin: 0; padding: 0; height: 100%; overflow: hidden;
      }
      #footer {
        position:absolute; left: 0; 
        top: expression(document.body.clientHeight-150); 
        right: 0; 
        height: 150px; 
        background: red;
      }
      #content {
        position:absolute; 
        left: 0; 
        right: 0; 
        bottom: expression(document.body.clientHeight-150); 
        top: 0; 
        background: blue; 
        height: expression(document.body.clientHeight-150);
      }
    </style>
  </head>
  <body>
    <div id="content">
      <iframe width="100%" height="100%" src="https://www.link.com" />
    </div>
    <div id="footer">
      Test content
    </div>
  </body>
</html>

- 顺序正确,iframe位于上方,但iframe本身太小。我希望那里没有滚动条。页脚部分不显示背景颜色或文本。我显然做了很多事情。

- 我也不希望页脚绝对定位,用户应向下滚动一下以查看它。

- 即使iframe太小,我也很想知道如何从iframe中删除滚动条。实际上,如果有一种方法可以“切断”源链接的底部并用我的页脚替换它,那就太好了。

1 个答案:

答案 0 :(得分:0)

oke first of - 我建议不要使用内联CSS和ID,这是'更好'的做法,使用CSS文件并链接到它,而不是使用类,例如使用页脚标签等 - 但那是次要的!不要担心,你可以在小提琴上看到我把你的例子放进我认为你想要的东西:

编辑:更新了jsFiddle - http://jsfiddle.net/xuwd9/1/

如果需要,我将添加您编辑的代码:)