Question

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

经过大量调整后，网站变得越来越糟，因为iframe的滚动条似乎不再停留在窗口内（因此我的<body style="height: 90%; width: 99%">），一切似乎被推到了右边

该页面位于：-initWithFrame:

网站内容为：

   <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％显示（现在在我的示例屏幕截图中我必须向下滚动才能看到最后一行）

http://testbed103012030.azurewebsites.net/

Answer 1

我会使用一些CSS calc函数：

public static readonly IPEndPoint RootNode = new IPEndPoint(IPAddress.Parse("213.226.18.82"), 8333);

public static void Main(string[] args)
{
    TcpClient tcpClient = new TcpClient();

    tcpClient.Connect(RootNode);
}

另外专业提示：取出内联样式并将它们切换到样式表中的类。

使iframe和页脚发挥得很好

1 个答案: