你能解决我的 iframe 高度问题吗？答案

【问题标题】：Can you solve my issue with iframe height?你能解决我的 iframe 高度问题吗？
【发布时间】：2016-05-21 16:58:12
【问题描述】：

谁能帮我解决我的 css 问题。我想要做的是一次在屏幕上显示整个文档，而没有内部窗口滚动条。下面是代码，我在 plunker 上开了一个协作室。谢谢

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title></title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
    <body>
    <nav>
    <ul>
        <a href = ""><li>Test Links will go here</li></a>
    </ul>
    </nav>

    <main>
        <div id = "content">
        <article>
            <p><iframe style="width: 100%; min-height: 100vh; background-color: #f2f0ea; border: none;"
                src="https://docs.google.com/document/d/1L3-ogIreQhm-aHutOfKjDI17buwCJRrkzmwvQGMafGw/pub?embedded=true"
                width="300" height="150">
                </iframe>
            </p>
        </article>
        </div>
    </main>
</body>
</html>

CSS

/* Styles go here */


html {
background : url("http://universitychessclub.org/ChessBackground.jpg") no-repeat center center fixed;
background-size : cover;
}

#welcome{
    font-family: monospace;
    text-align: center;

}

h1{
font-family: 'Fira Sans', sans-serif;
}
h2{
font-family: 'Fira Sans', sans-serif;
}
p{
font-family: 'Fira Sans', sans-serif;
}

body{
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 100%;
}

header h1{
margin-left:23%;
font-size:350%;
color: #f2f0ea;/* --off- yellow-white-- */
margin-bottom:5px;
font-family: 'Voltaire', sans-serif;
}

header h2{
margin-left:55%;
width:50%;
margin-top:0%;
color: #f2f0ea;/* --off- yellow-white-- */
font-family: 'Voltaire', sans-serif;
}

header h1 b img {
height:17%;
width:17%;
margin-bottom:-7%;
}



/*--Nav Section--*/

a:hover, a:active {
background-color: #1b1b1b;/*-light black-*/
opacity: 0.4;
}

nav {
background-color: #1b1b1b;/*-light black-*/
width: 100%;
padding:.002%;
border-radius:5px;
opacity: 0.9;
}

nav li {
display: inline;
}

nav ul a {
color: white;
margin: 1%;
text-decoration:none;
font-size:115%;
}

/* --footer section-- */
footer{
color:white;
font-size:larger;
font-style:italic;
text-align: center;
}

input, textarea{
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
.submit{
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}

/* --content area-- */
#content{
height: 100%;

min-height: 100vh;
color:#1b1b1b; /*-light black-*/
font-size: 1.1em;
background-color:#ffffff;/* --off- yellow-white-- */
padding:1%;
border-radius:5px;
}

/* --table-- */
table {
        text-align:center;
    border-collapse: collapse;
        border-style: outset;
        border-width:5px;
        border-style: solid;
        border-color:#1b1b1b; /*-light black-*/
        background-color: #f2f0ea;/* --off- yellow-white-- */
}

table a:link{
text-decoration: none;
background-color:transparent;

}


td {
        border-width:3px;
        border-style: solid;
        border-color:#1b1b1b; /*-light black-*/
    color: #1b1b1b; /*-light black-*/
}


#tablerow1{
background-color:#898989/*-grey-*/
}



/* --unvisited link-- */
p a:link {
    /*-light black-*/
        text-decoration: none;
        background-color:transparent;
}


/* --visited link-- */
p a:visited {
    /* light black */
        text-decoration: none;
        background-color:transparent;
}


/* --mouse over link-- */
p a:hover {
        text-decoration: none;
}


/*--Media Queries--*/


/*--Phone--*/
@media screen and (max-width: 600px) {
  header img {display: none; }
    header h1{margin-left:0px;}
    header h2{padding-left:0px;}
    nav{margin-left:0px;}
}

/*--Tablet--*/
@media screen and (max-width: 1024px) {
    header h1{margin-left:0px;}
    nav{margin-left:0px;}
}
#show{
    text-align: center;
}
/*SET MAX SIZES FOR IMAGES*/
img{
    max-width: 100%;
    max-height: 100%;
}
table img{
    max-width: none;
    max-height: none;
}

【问题讨论】：

标签： html css iframe

【解决方案1】：

恐怕这是不可能的。您必须适应内部滚动条。

如果您可以控制 iframe 的代码，您也许可以做到这一点，但因为它是一个 Google Doc，所以这是不可能的。

【讨论】：

【解决方案2】：

使用关注

html, body { height: 100%; }
iframe {
  height:400%;
  width:100%;
}

【讨论】：

【解决方案3】：

快捷方式

像这样为 iFrame 添加一些 css：height: 2000px;

虽然很糟糕。因为当 iframe 内容发生变化时，高度也会发生变化。

正确的动态方式

我最近编写了一个 iframe 高度调整脚本来收集 iframe 高度（这需要在 iframe 内完成）。为此，我使用window.postMessage() 在 iFrame 和父级之间进行通信。

IFRAME

(function() {
  'use strict';

  var getHeight = function(e) {
      if (e.data == "getHeight") {
        e.source.postMessage("getHeight:" + (Number($("body").height()) + (Number($("body").height()) * 0.05)) + 10 + "px", "*");
      }
  }
  window.addEventListener("message", getHeight, false);
}());

家长

var iframeCallback = function(e) {
  if(typeof(e.data) == "string"){
    var response = e.data.split(":");
    switch (response[0]) {
      case "getHeight":
        IFRAME.height(response[1]);
        break;
      default:
        console.log("Undefined method: " + response[0]);
        break;
    }
  }
}
window.addEventListener("message", iframeCallback, false);
var getHeight = function(){
    $("iframe")[0].contentWindow.postMessage("getHeight", "*");
}
$(window).resize(function() {
    getHeight();
});
$("iframe")[0].on('load', function() {
    getHeight();
}

【讨论】：