Full screen iframe
The body
has a default margin in most browsers. Try:
body {
margin: 0;
}
in the page with the iframe
.
Full-screen iframe with a height of 100%
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!
Is there a way to have an iframe in fullscreen?
Use Viewport width and height instead of percentages
iframe {
height:100vh;
width:100vw;
}
Youtube iframe - 'fullscreen is unavailable'
Depending on which browser you are using you may need alternative settings turned on iframe see: YouTube iframe embed - full screen for in depth answer
Related Topics
Triangle Bottom CSS with Background
White Space Between the Title and Web Browsers
Ruby Slim - How to Define an Element's Class with a Rails Helper or Variable
Using Os 9 Resource Fork Fonts in CSS with @Font-Face
Put Icon Inside Input Element in a Form (Not as Background Image!)
Create Bottom Responsive Arrow
What CSS Should I Use to Get a Border Around an Option Tag in Both Firefox and Ie
Display: Flex - Not Working in Firefox 21
How to Fit a Sticky Background Image and Prevent Overflow in CSS
How to Position Child Div to the Center of Every Parents Div Using Position Absolute in CSS
HTML CSS Positions Not Working
How to Put a <Style>...</Style> Tag Within the Body of a HTML File to Send in Email
How to Use Multiple Itemprops in a Span Tag for Schema.Org Rich Snippets
How to Stop the Browser from Url-Encoding Form Values on Get
How to Make Child Divs Use All Available Space When One Makes the Container Scroll