使iframe和footer發揮不錯

我有一個Typeform調查，我嵌入到網頁中。但是，需要在網站的所有部分顯示頁腳，因此我在下添加了<footer>塊。使iframe和footer發揮不錯

然而，經過很多調整後，網站變得越來越糟，因爲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>

我如何：

確保該網站包含ifram E在頂部和頁腳在底部
凡軀不包括iframe中以任何方式
凡IFRAME Typeform仍顯示最佳
和整個網站顯示在移動設備上
而如果可能的話，整個頁腳顯示的100％的時間（在我的例子截圖，現在我必須向下滾動才能看到最後一行）

來源

2015-10-08 ReignOfComputer

我會使用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>

而且專業提示：取出內嵌樣式，並將它們在樣式表切換到班。

來源

2015-10-08 18:33:28 YepNamesJames

這對於頁腳有效，謝謝！對於內聯樣式感到抱歉，他們主要是在那裏進行測試。 – ReignOfComputer

謝謝@ReignOfComputer，請勾選我的解決方案 – YepNamesJames

使iframe和footer發揮不錯

回答

相關問題