使 iframe 和页脚发挥良好

Question

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

下方添加了一个 <footer> 块

然而，经过多次调整后，该网站变得越来越糟，因为 iframe 的滚动条似乎不再停留在 window 内（因此我的 <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% 的时间内显示（现在在我的示例屏幕截图中，我必须向下滚动才能看到最后一行）

Answer 1

我会使用一些 CSS 计算函数：

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

还有专业提示：取出内联样式并在样式表中将它们切换为类。

使 iframe 和页脚发挥良好

Making iframe and footer play nice

html

css

iframe

footer