javascript - 将 iframe 定位在页 footer 分上方。简单的

标签 javascript html css iframe styles

我希望 iframe 位于包含一些内容的页 footer 分上方。

我是这方面的真正初学者,但我能够拼凑一些代码。

<!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本身太小了。我希望那里没有滚动条。页 footer 分不显示背景颜色或文本。我显然把事情搞得一团糟。

-我也不希望页脚绝对定位,用户应该向下滚动一点才能看到它。

-我也很想知道如何在 iframe 太小的情况下摆脱 iframe 的滚动条。实际上,如果有一种方法可以“切断”源链接的底部并将其替换为我的页脚,那就太好了。

最佳答案

首先 - 我建议不要使用内联 CSS 和 ID,“更好”的做法是使用 CSS 文件并链接到它,而不是使用类,例如使用页脚标签作为页脚等等 - 但那是次要的!别担心,你可以在下面的 fiddle 上看到我把你的例子放在我认为是你想要的东西中:

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

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

关于javascript - 将 iframe 定位在页 footer 分上方。简单的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21235453/

相关文章:

javascript - 如何使用包含文件和发布数据的 JavaScript 创建 AJAX 请求

javascript - 在Javascript中,乘法后,数字何时以及为什么计算为NaN?

html - 禁用选项在 Android 平板电脑上无法正常工作

html - 分词属性如何从空间中分离出来?

html - 文本对齐 : right has margin or buffer in Chrome

php - 如何在 codeigniter 中引用 css 文件?

c# - asp.net:点击运行javascript?

javascript - Javascript 生成错误数字的问题

javascript - 不会在手机上显示图像

jquery - 如何访问使用 css3 列创建的单列?