html - 使 iframe 和页脚发挥良好-6ren

html - 使 iframe 和页脚发挥良好

转载作者：太空宇宙更新时间：2023-11-04 11:18:07

25

4

我有一个要嵌入到网页中的 Typeform 调查。但是，网站的所有部分都需要显示页脚，因此我添加了 <footer>。在 <iframe> 下方屏蔽.

然而，经过大量调整后，该网站变得越来越糟，因为 iframe 的滚动条似乎不再停留在窗口内(因此我的 <body style="height: 90%; width: 99%"> )，并且所有内容似乎都被推到了右边。

页面位于:http://testbed103012030.azurewebsites.net/

网站内容是:

   <body style="height: 90%; width: 99%">
      <div style="width: 100%; height: 100%;" class="frame"><iframe id="typeform-full" src="https://showroom.typeform.com/to/WJ565l" 
         frameborder="0"></iframe></div>
      <footer>
         <div class="footer">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua | &copy; 2015 Lorem Ipsum
            </p>
            <p>
               <i>Excepteur sint occaecat cupidatat non proident</i>
            </p>
         </div>
      </footer>
      <script type="text/javascript" src="embed.js"></script>
   </body>

CSS 是:

  <style type="text/css">
     html{
     margin: 0;
     height: 100%;
     overflow: hidden;
     }
     iframe{
     position: relative;
     left:0;
     right:0;
     bottom:0;
     top:0;
     border:0;
     width: 100%;
     height: 100%;
     }
     .footer{
     position: relative;
     width: 100%;
     bottom: 0;
     right: 0;
     left: 0;
     height: auto;
     background: white;
     font-family: "Source Sans Pro",sans-serif;
     text-align: center;
     font-size: 80%;
     }
  </style>

我如何:

确保网站由位于顶部的 iframe 和位于底部
页脚不以任何方式覆盖 iframe
iframe Typeform 仍然以最佳方式显示
整个网站在移动设备上显示良好
如果可能的话，整个页脚会在 100% 的时间内显示(现在在我的示例屏幕截图中，我必须向下滚动才能看到最后一行)

最佳答案

我会使用一些 CSS calc 函数:

<body style="height: 100%; width: 99%">
    <div style="width: 100%; height: calc(100% - 7em);" class="frame">
        <iframe id="typeform-full" src="https://showroom.typeform.com/to/WJ565l" 
         frameborder="0"></iframe>
    </div>
    <footer style="height: 7em">
    </footer>
</body>

还有专业提示:取出内联样式并将它们切换到样式表中的类。

关于html - 使 iframe 和页脚发挥良好，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33023120/

25

4

0

文章推荐： c++ - syscalls.h 以及 minor() 和 major() 函数

文章推荐： javascript - JxBrowser 在自定义 ProtocolHandler 中获取帖子正文

文章推荐： java - Spring Boot 引用指南 - 从 app.groovy 示例中获取 404

iframe - iframe 页面可以告诉它们何时被 iframe 吗？
所以我知道，如果我将 iFrame 包含到不在同一域中的页面，我将无法通过浏览器策略访问该 iframe 的 DOM，但是 iframe 中的页面可以执行任何类型的父文档访问吗？具体来说，我必须考虑
iframe - 从其他 iframe 字符串中获取 iframe 元素
我有 3 个嵌套的 iframe，我想访问第三个 iframe 中的元素(链接)。 var iframe = document.getElementById('aswift_2'); var inne
iframe - 将浏览器开发人员工具控制台上下文切换到特定的 iframe
Chrome 有最简单的方法，只需从下拉列表中选择一个框架即可。 Firefox 提供了 cd(frame)功能不太好用，但只要您愿意发现哪个框架是哪个框架就可以完成工作。但是我们如何在 Inter
iframe - 在不同域中的不安全页面上保护 iframe
我们公司正在考虑允许第三方网站使用我们的在线结账系统。一位客户表示，他们希望能够使用灯箱样式的弹出窗口来显示结帐。他们希望在网站的每个页面上都可以使用它，因此大多是不安全的页面。我们的结帐系统和客户
iframe - iframe 中从子级到父级的跨域访问
当 iframe 中加载的页面来自另一个域时，我们如何从 iframe 中加载的文档访问父文档？我收到权限被拒绝错误。最佳答案如果您可以控制这两个文档，那么您可以轻松地使用 easyXDM (
iframe - Iframe 中的重定向问题
使用 SOAP 调用我得到一个 URL 并在 iframe 中显示。那个 URL 内容是一个表单，用户需要填写所有数据并提交它。当我调用 SOAP 函数时，也给出了一个返回链接，其中一个重定向到我的站
iframe - 模仿来自另一个域的 iframe
我正在尝试开发一个小型 Web 应用程序，其中包含一个使用来自另一个域的 iframe 的 Web 应用程序。我正在尝试在本地计算机上对此进行测试，为此我需要模仿 iframe 来自另一个域(虽然它实
iframe - 异步加载 iframe
我有一个网页指向另一个网站。我不希望这阻止页面其余部分的加载。有没有办法异步加载它？最佳答案使用 jQuery，可以实现以下效果: $(window).load(function() {
iframe - iframe API似乎仅适用于较早的虚荣网址
我搜索过高低，无法找到解决方案。在我看来，iframe API仅适用于较旧样式的网址，而不适用于较新的海关网址。我的意思是，如果某人的YouTube网址为www.youtube.com/user/T
iframe - 通过我的服务器代理YouTube iframe
我想在我的网站上显示youtube视频。 iframe是可能的，我只需要像这样将其放在我的网页上。一切都很好，除了我超过99％的客户来自伊朗，而且YouTube在伊朗被政府封锁。因此，直接从you
iframe - 为什么人们仍然使用 iframe？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
iframe - 谷歌分析和 iFrame
所以我有一个简单的页面，当用户单击链接时，iframe 将打开。我正在尝试使用 http://www.google.com/support/analytics/bin/answer.py?hl=en&
iframe - 网络爬虫和 IFrame
假设情况:我有一个名为“miniatureBoltsInCarburetors.com”的不起眼的小网站，该网站提供有关将化油器固定在一起的微型 bolt 的内容以及一些一般相关的汽车信息。我的网站还
iframe - 此页面包含安全和不安全的项目以及 iframe
IE 6.0 向我显示消息“此页面包含安全和非安全项目”，因为我的页面上有 iframe(针对组合框错误)。我尝试指向 src 中的一些不同的内容，但如果不放入空白的 html 页面，我似乎无法摆脱此
iframe - 防止在回发时重新加载 iframe
我有一个带有一个 iframe 和一个按钮的网页。在页面加载事件中， if (!Page.IsPostBack) { string sDocUrl = //some doucmen url Ifra
javascript - 如何从页面中临时删除 iframe，然后在不重新下载 iframe 内容的情况下重新添加 iframe？
我有一个带有一些 IFrame 的页面。这些 IFrame 位于同一域中。我想在打开模态窗口时从页面中删除 iframe 内容，以减少模态窗口中的延迟。然后，当我关闭模态窗口时，我希望将 IFram
testing - Protractor iframe inside iframe inside iframe
我正在尝试访问一个框架内的控件，该框架位于另一个框架内的框架内。最后(最深的)框架仅用于登录 - 我设法做到了。问题是登录后我基本上需要回到上框点击一个按钮。出于某种原因，我不断收到错误消息: N
javascript - 访问父 iframe 元素的容器(iframe inside iframe)
我有下一个元素结构: .. actual markup with scripts here 使用纯 javascript，我已经摆脱
iframe - 突破具有多个限制的 iframe
我们使用 Worldpay 作为我们的支付提供商，我们将 PayPal 作为 worldpay 的一部分实现，这意味着我们只与 Worldpay 集成，他们处理 PayPal 集成。虽然这会带来很多
iframe - 嵌套在非安全页面上的安全 IFRAME
我有一个客户，由于特定原因，需要在 HTTP 页面上放置一个指向 HTTPS 页面的 IFRAME。 HTTP 页面托管在与 HTTPS 页面不同的域和服务器上，但都属于同一客户端。撇开为什么不应该

首页

博学

6Ren·AI

商城

html - 使 iframe 和页脚发挥良好