IFrame位置

Question

我有一個iFrame，我無法在瀏覽器的左側刷新。它似乎卡住了。它似乎在300 - 400像素左右。有任何想法嗎？謝謝。

這裏我下面的CSS代碼： - ：

.wrapper { 
 
        display: block; 
 
        position:fixed; 
 
        top: 0; 
 
        width: 100%; 
 
        height: 100%; 
 
        box-sizing: border-box; 
 
        padding: 100px 0 20px; 
 
       } 
 
       .wrapper iframe { 
 
        height: 100%; 
 
        width: 100%; 
 
       }

 <div class="wrapper"> 
 
      <iframe src="My Source"></iframe> 
 
     </div>

Answer 1

我能夠做一個簡單的修改的CSS來解決這個問題。

我將left: 0;添加到了CSS。

下面是它看起來像現在：

.wrapper { 
        display: block; 
        position:fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        box-sizing: border-box; 
        padding: 100px 0 20px; 
       } 
       .wrapper iframe { 
        height: 100%; 
        width: 100%; 
       } 

謝謝所有誰幫助和觀察。

我還建議檢查彼得的答覆，因爲他提供的信息非常有益和信息豐富。

-Z

Answer 2

在這種情況下，它是身體標記的保證金，就包括這在你的CSS：

html, body {margin: 0px;} 

演示：https://jsfiddle.net/1ap4fg30/

您需要考慮瀏覽器引擎的默認樣式。 要使所有元素在瀏覽器中始終呈現，您需要使用某種類型的CSS重置或標準化樣式表。

看看這個，例如：https://necolas.github.io/normalize.css/