How do I get the height to the full page height?


Tags: html,css,iframe

Problem :

I'm trying to get the iframe the to the full page height, but it's not really working. I already tried many ways to do it, but none of them would work for me...

I hope some of you know how to do it!

HTML:

<body>
    <article>
        <h1>Hello world</h1>
        <p class="subtitle fancy ">
            <span>Versie 1.0</span>
        </p>
    </article>

    <iframe class="configurator " src="" frameBorder="0">Browser not compatible.</iframe>

    <footer>
        <span class="arrow "></span>
        <p>&#169; Copyright 2015</p>
    </footer>
</body>

CSS:

html, body {
  margin: 0;
  padding: 0;
}
body {
  background: #ECECEC;
  margin: 0px;
  color: #333;
  font-family:'Cinzel Decorative', cursive;
}
h1 {
  font-size: 3em;
  text-align: center;
}
article {
  max-width: 600px;
  overflow: hidden;
  margin: 0 auto 50px;
}
.subtitle {
  margin: 0 0 2em 0;
}
.fancy {
  text-align: center;
  display: -webkit-flex;
}
.fancy:before, .fancy:after {
  content:"";
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  -webkit-flex: 1;
  margin: .45em 0;
}
.fancy:before {
  margin-right: 15px;
}
.fancy:after {
  margin-left: 15px;
}
footer {
  background-color: #D7D7D7;
  position: relative;
  margin-bottom: 0px;
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  font-family:'Montserrat', sans-serif;
  border-top: 2px solid white;
}
footer p {
  margin-left: 10px;
  font-size: 15px;
  color: #626262;
}
footer:before, footer:after, footer > .arrow {
  content:"";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -20px;
  border: 20px solid transparent;
  border-bottom-color: #D7D7D7;
  pointer-events: none;
}
footer:after {
  margin-left: -8px;
  border-width: 8px;
}
footer > .arrow {
  margin-left: -11px;
  border-width: 11px;
  border-bottom-color: #fff;
}
.configurator {
  width: 100%;
  background-color: white;
  position: absolute;
  margin-top: -50px;
  margin-bottom: -1000px;
}

So what I want is the iframe height all the way to the bottom against the top of the footer.

jsFiddle: http://jsfiddle.net/94d9tbLx/



Solution :

Added script to find height .

var h = $(document).outerHeight() - $('article').outerHeight() - $('footer').outerHeight();
$('iframe').css('height', h);

Please check the fiddle - http://jsfiddle.net/afelixj/94d9tbLx/2/


    CSS Howto..

    How to make this Header/Content/Footer layout using CSS?

    How to css this little button next to