Question

[solved]

So I have a div with a constant height at the top of my page and I want to have an iFrame below it fill up the rest of the page. Google Images and LinkedIn do something very similar

See: http://www.linkedin.com/share?viewLink=&sid=s420444224&url=http%3A%2F%2Flnkd%2Ein%2FcnjYt4&urlhash=ZGYM&pk=nprofile-view-success&pp=1&poster=22330283&uid=5484658853024890880&trk=NUS_UNIU_SHARE-title).

Here is the CSS code I have now:

#header {
  height: 60px;
  float: top;
  position: absolute;
}
#iframe {
  margin-top:61px;
  float: bottom;
  position: absolute;
}

Also, within the HTML, I have made the iFrame 99% width and 90% height.

But this isn’t working too well. I only want the iFrame to have scroll bars, but as I start to decrease the window size part of it becomes hidden (barely). As a result, a second set of scroll bars appear. By the way, this is the previous SO question I referred to when trying to tackle the problem: CSS two divs next to each other

Does anyone know how to recreate what LinkedIn does in CSS?

Answer 1

I usually would resort to javascript.

Using the jquery library you could do the following in a very simple way.

$().ready(function() {
        $('#iFrame').height($(window).height() - 62);
    });


$(window).resize(function() {
        $('#iFrame').height($(window).height() - 62);
    });