<iframe>身高響應

Question

所以我有我的網頁，我需要它。我需要這個iframe來顯示沒有滾動條的全頁面內容。這不是問題，因爲它已經在工作。問題是如何使它響應，所以它會顯示沒有滾動條的iframe的完整內容。我已經使寬度響應，但我不能讓高度作出反應。這裏是我的代碼：

.frame-area { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    border: #999999 1px solid; 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<iframe name="Framename" src="/clients1.php" frameborder="0" scrolling="auto" class="frame-area"> 
 
    </iframe>

Answer 1

這是你想要的嗎？

爲什麼你的iFrame是不會全高的原因是因爲html和body元素，並沒有設置爲100%，所以我設置這一點，我已經使用margin:0px清除瀏覽器設置的默認邊距。請在CSS下面找到html和body標籤。

html, 
body { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
} 

除了這個我也得到I幀，這是因爲它不包括在尺寸的IFrame（高度和寬度），來克服這個問題，我使用的CSS屬性的邊界之外的邊緣box-sizing:border-box這將考慮實際的高度，包括邊距和邊框，所以滾動條不會出現！

.frame-area { 
    display: block; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    border: #999999 1px solid; 
    margin: 0px; 
    padding: 0px; 
    box-sizing:border-box; 
} 

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
} 
 

 
.frame-area { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    border: #999999 1px solid; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    box-sizing:border-box; 
 
}

<iframe name="Framename" src="/clients1.php" frameborder="0" scrolling="auto" class="frame-area"> 
 
</iframe>