Can you solve my issue with iframe height?

Question

Can anyone help me solve an issue with my css. What I want to do is display the entire document on the screen at once without having an inner window scroll bar. Below is the code and I've opened up a collaborative room on plunker. Thank you

Plunker code

<!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;
}

score 1 · Answer 1 · answered Feb 11 '16 at 04:13

1

Use the Follows

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

answered Feb 11 '16 at 04:13

solimanware

2,952
4
20
40

score 0 · Answer 2 · edited May 23 '17 at 10:28

I’m afraid this isn’t possible. You’ll have to settle for the inner scroll bar.

You might be able to do it if you have control over the iframe’s code, but since it’s a Google Doc that’s not possible.

score 0 · Answer 3 · answered Feb 11 '16 at 04:32

The quick way

Add some css for the iFrame like this: height: 2000px;

It's bad though. Because when iframe content changes so will height.

The proper dynamic way

I recently wrote an iframe height adjustment script that gleans iframe heights (this needs to be done from within the iframe). For this I used window.postMessage() to communicate between the iFrame and parent.

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);
}());

PARENT

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();
}

Can you solve my issue with iframe height?

3 Answers3