Html 使iframe和footer发挥作用_Html_Css_Iframe_Footer

Html 使iframe和footer发挥作用

html css iframe

Html 使iframe和footer发挥作用,html,css,iframe,footer,Html,Css,Iframe,Footer,我有一个打字调查，我嵌入到一个网页。但是，网站的所有部分都需要显示页脚，因此我在下面添加了一个块然而，经过多次调整后，该网站变得越来越糟糕，因为iframe的滚动条似乎不再停留在窗口内（因此我的），所有内容似乎都被推到了右侧该网页可在以下网址找到：网站内容如下： <body style="height: 90%; width: 99%"> <div style="width: 100%; height: 100%;" class="frame">&

我有一个打字调查，我嵌入到一个网页。但是，网站的所有部分都需要显示页脚，因此我在

下面添加了一个

块

然而，经过多次调整后，该网站变得越来越糟糕，因为iframe的滚动条似乎不再停留在窗口内（因此我的

），所有内容似乎都被推到了右侧

该网页可在以下网址找到：

网站内容如下：

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



Lorem ipsum dolor sit amet，是一位杰出的职业经理人，他在工作和工作中都是临时雇员；2015 Lorem Ipsum


无过失的圣约翰例外情况

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>


html{
保证金：0；
身高：100%；
溢出：隐藏；
}
iframe{
位置：相对位置；
左：0；
右：0；
底部：0；
排名：0；
边界：0；
宽度：100%；
身高：100%；
}
.页脚{
位置：相对位置；
宽度：100%；
底部：0；
右：0；
左：0；
高度：自动；
背景：白色；
字体系列：“源Sans-Pro”，无衬线；
文本对齐：居中；
字号：80%；
}

我如何：

确保站点由顶部的iframe和底部的footer组成底部

页脚不以任何方式覆盖iframe

iframe类型仍然以最佳方式显示

整个网站在移动设备上显示良好

如果可能的话，整个页脚在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>

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

这对页脚有效，谢谢！对于内联样式很抱歉，目前它们主要用于测试。谢谢@ReignOfComputer，请选中我的解决方案