Skip to content
Fix Code Error

Full-screen iframe with a height of 100%

March 13, 2021 by Code Error
Posted By: Anonymous

Is iframe height=100% supported in all browsers?

I am using doctype as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In my iframe code, if I say:

<iframe src="xyz.pdf" width="100%" height="100%" />

I mean will it actually take the height of the remaining page (as there is another frame on top with fixed height of 50px)
Is this supported in all major browsers (IE/Firefox/Safari) ?

Also regarding scrollbars, even though I say scrolling="no", I can see disabled scrollbars in Firefox…How do I completely hide scrollbars and set the iframe height automatically?

Solution

You could use frameset as the previous answer states but if you are insistent on using iFrames, the 2 following examples should work:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

An alternative:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

To hide scrolling with 2 alternatives as shown above:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Hack with the second example:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

To hide the scroll-bars of the iFrame, the parent is made overflow: hidden to hide scrollbars and the iFrame is made to go upto 150% width and height which forces the scroll-bars outside the page and since the body doesn’t have scroll-bars one may not expect the iframe to be exceeding the bounds of the page. This hides the scrollbars of the iFrame with full width!

Answered By: Anonymous

Related Articles

  • PHP + JQuery - How to use these two together? Please…
  • Any way of using frames in HTML5?
  • Vue.JS & Spring Boot - Redirect to homepage on 404
  • Active tab issue on page load HTML
  • What does "" do?
  • How to get an IFrame to be responsive in iOS Safari?
  • Troubleshooting "Warning: session_start(): Cannot…
  • How to vertically align an image inside a div
  • Text size and different android screen sizes
  • Form field border-radius is not working only on the…
  • UnboundLocalError: local variable 'event' referenced…
  • How to show title in hover - css / jquery
  • How to disable HTML links
  • After a little scroll, the sticky navbar just is not…
  • YouTube iframe API: how do I control an iframe…
  • Navbar not filling width of page when reduced to mobile view
  • Full Page
  • Adobe XD to responsive html
  • Master Page Weirdness - "Content controls have to be…
  • Geolocation denied for HTML embedded site - anchor…
  • Fix height of a table row in HTML Table
  • Make Iframe to fit 100% of container's remaining height
  • Calculate the mean by group
  • Vuejs v-for Passing data Parent to Child
  • How to use html template with vue.js
  • Fix top buttons on scroll of list below
  • Playing HTML5 video on fullscreen in android webview
  • VueJS masonry layout
  • Having trouble with my nav bar/header, It used to…
  • Increasing size of semi circle using css
  • HTML table with 100% width, with vertical scroll…
  • Jquery fadeToggle Trouble
  • CSS Animation Depending on Child Element
  • CSS customized scroll bar in div
  • Python : Using Turtle-graphics, having issue with…
  • jQuery Mobile: document ready vs. page events
  • How to give ASP.NET access to a private key in a…
  • How to filter a RecyclerView with a SearchView
  • UIView frame, bounds and center
  • How do i update a javascript variable as its value changes?
  • useEffect Error: Minified React error #321 (GTM…
  • Is it possible to apply CSS to half of a character?
  • Ukkonen's suffix tree algorithm in plain English
  • How do SO_REUSEADDR and SO_REUSEPORT differ?
  • Automapper Aftermap alternative for Nested Mapping
  • How to pull out an element to the right in…
  • node.js: read a text file into an array. (Each line…
  • Very Simple, Very Smooth, JavaScript Marquee
  • Hiding the Scrollbar while allowing scrolling with…
  • What is the easiest way to disable/enable buttons…
  • Select dropdown with fixed width cutting off content in IE
  • Show div on scrollDown after 800px
  • How do I do a drag and drop using jQuery to move…
  • Why does this CSS margin-top style not work?
  • How to make a stable two column layout in HTML/CSS
  • showing record text with red color when click stop button
  • Why my "title" bloc doesn't go to bottom?
  • "Access is denied" JavaScript error when trying to…
  • Changing iframe src with Javascript
  • Positioned element is off when on Safari`
  • Using Shadow Dom CSS Animations on distributed…
  • No line-break after a hyphen
  • Error 'Map', but got one of type 'Null' flutter web…
  • Catch error if iframe src fails to load . Error…
  • Sort table rows In Bootstrap
  • Change image on hover
  • Javascript validate all checkboxes are selected
  • Javascript text animation not triggering
  • How do I remove the top margin in a web page?
  • python 3.2 UnicodeEncodeError: 'charmap' codec can't…
  • asp.net: Invalid postback or callback argument
  • How to make script execution wait until jquery is loaded
  • Is it possible to move my text side by side with my icon
  • HTML Script tag: type or language (or omit both)?
  • CheckBox disabled attribute bound to Polymer…
  • CSS Margin: 0 is not setting to 0
  • Smart way to truncate long strings
  • How to Fix hover not working after JS script…
  • Alternative solution on randomizing JLabel
  • show and hide previous and next button jQuery
  • Inserting the iframe into react component
  • Alternative to header("Content-type: text/xml");
  • Show and hide divs at a specific time interval using jQuery
  • CSS media queries for screen sizes
  • Bootstrap Carousel Full Screen
  • How can I adjust the color of a fixed element to its…
  • Fill remaining vertical space with CSS using display:flex
  • Fixed sidebar navigation in fluid twitter bootstrap 2.0
  • Android splash screen image sizes to fit all devices
  • Css height in percent not working
  • Google Maps API throws "Uncaught ReferenceError:…
  • Python, creating objects
  • Nested class: Calling child class properties in parent class
  • Reference — What does this symbol mean in PHP?
  • How to pick element inside iframe using…
  • How can I make a UITextField move up when the…
  • iPhone 6 and 6 Plus Media Queries
  • Switch between two frames in tkinter
  • How to make the overflow CSS property work with…
  • How do I style a dropdown with only CSS?

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Is there a tag to turn off caching in all browsers?

Next Post:

How do I diff the same file between two different commits on the same branch?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error