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>
Attribution to: edgartheunready
Possible Suggestion/Solution #1
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.
//}
}
}
);
}
};
}]);
Attribution to: Pirate 741
Possible Suggestion/Solution #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>
</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>
Attribution to: bigassforce
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/30605