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%"/>

and this is the result: enter image description here

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'/>

enter image description here


2 Answers 2


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>

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:

    (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;
  • Do you know which browsers this works in (see e.g. stackoverflow.com/questions/10173236/…)?
    – Keith C
    Mar 20, 2014 at 22:07
  • 1
    Nope. Keeping it short for the sake of example rather than importing a library @KeithC Mar 20, 2014 at 23:29
  • 1
    it works in Chrome, and we only support Chrome, so I am happy. Thanks guys! Mar 21, 2014 at 14:26
  • 1
    I've added your onresize handler @edgartheunready Mar 21, 2014 at 18:29

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) {
          function () {
              return elm[0].offsetHeight;
          function (newValue, oldValue) {
              if (newValue != oldValue) {
                 //change iframe height here.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .