How to create visualforce page with iframe with auto resizing height?

Question

I have a visualforce page with the following contents:

<apex:page controller="TheController" sidebar="false">
    <iframe src="{!url.url__c}" scrolling="true" id="iframe_id" width="100%" height="100%"/>
</apex:page>

and this is the result:

How can I get the iframe height to take up the full browser window's height? I want to use as much of the page as possible without having two scroll bars (1 for the content of the iframe, and one for the parent page).

Update: When using styling as recommended in the stack overflow question in the comment below, I ended up with the following code and result:

<apex:page controller="AmbitionController" sidebar="false">
    <iframe src="{!url.url__c}" scrolling="true" id="ambition_iframe" style='position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:999'/>
</apex:page>

Answer 1

The trick is to resize the iframe with JavaScript after you know the size of the browser viewport:

<apex:page sidebar="false">
    <apex:iframe src="https://www.salesforce.com/" id="theFrame" />
    <script>document.getElementById('theFrame').height = window.innerHeight - 220;</script>
</apex:page>

Leave about 220 pixels for the Salesforce header and footer.

For bonus points, you can trim the container cell padding if you need and play with the 220 figure.

<style>table#bodyTable {border-collapse: collapse;} table#bodyTable td {padding: 0;}</style>

Edit: You can additionally deal with when the window is resized:

<script>
    (function() { //this wrapper prevents pollution of the global scope
        var windowOnresize = window.onresize;
        window.onresize = function() {
            if (windowOnresize) windowOnresize(); //don't trample the handler; intercept it
            document.getElementById('theFrame').height = window.innerHeight - 220;
        };
    }());
</script>

Answer 2

If you are using angular JS, here is something that you can leverage :

Write a height detecting directive for the app's body and update the iframe's height correspondingly.

angular.module('testApp').directive('elemHeight', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
                scope.$watch
      (
          function () {
              return elm[0].offsetHeight;
          },
          function (newValue, oldValue) {
              if (newValue != oldValue) {
                 //change iframe height here.
                  //}
              }
          }
      );
        }
    };
}]);