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!


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

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

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


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 {
  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 {
  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.


Solution :

Added script to find height .

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

Please check the fiddle -

    CSS Howto..

    How to vertically align and stretch content using CSS flexbox

    CSS: how to layout 3 columns, 2 are optional

    myFlowPanel has many childFlowPanels, so how to create the same margin for all childFlowPanels without using marginTop on childFlowPanels (GWT)?

    How to count the number of correct answers using Javascript?

    CSS: How to set container size equal to background image size

    How to apply css for only second occurance

    How to overide CSS for width?

    How do I disable position:fixed in web pages?

    How to use nth-child() but not for child in CSS?

    CSS: How to align vertically a “label” and “input” inside a “div”?

    How do I center text relative to its parent div with CSS?

    How to align items in second (and further) column, so that the changing value (increasing characters) do not push

    How to make div covers divs on hover?

    How do I align these boxes using bootstrap?

    how to change CSS styles dynamically using php/Mysql..i want to create themes that are unique to each user?

    How to add a broccoli plugin to ember-cli app with live-reload?

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

    How to make combination of images responsive?

    How do I manipulate the same function in javascript for two different classes

    How to contents of div onclick tab

    JavaFX: How do I set a Background Image in code?

    How can I control my

    styling in another styling?

    How to add load more button for a HTML/CSS page?

    How to jump to specific sections of a sprite sheet in css?

    how to show background image(multiple) if out of current div

    How to ignore comments in sass partial files?

    How do I add a CSS class to an element from CSS (not jquery nor javascript)?

    Chrome doesn't show the favicon

    How to place a responsive background according to content height with HTML / CSS?

    HTML5/CSS3 how to force text to require a certain width for rendering