Q:

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

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>

A:

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>

