CODEWITHSUNDEEP
htmlcssiframe
user1854438
user1854438

Reputation: 1842

Can you solve my issue with iframe height?

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

Upvotes: 0

Views: 193

Answers (3)

sudo
sudo

Reputation: 323

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

Upvotes: 0

solimanware
solimanware

Reputation: 3051

Use the Follows 

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

Upvotes: 1

Ted Whitehead
Ted Whitehead

Reputation: 1826

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.

Upvotes: 0

Related Questions