In this post I'm going to show you how a fluid layout can actually help us with inserting our page contents into an iframe element without any scrollbars. To accomplish this task, we need a sample page that will be inserted in another page through the iframe element. This page contains only a basic wrapper with an heading and a paragraph but with the following styles:
body {
margin: 0;
padding: 0;
font: small Arial, sans-serif;
line-height: 1.4;
}
#container {
width: 80%;
margin: 0 auto;
}
By using percentages, we actually get an absolutely fluid layout that will fit any possible dimensions. Then we insert this page into another page using the iframe element:
<iframe src="css-iframes/sample.html" height="250" width="300"></iframe>
To remove the annoying border from this element we have to use a little bit of JavaScript to avoid any possible validation error (the frameBorder attribute is illegal in standard HTML):
window.onload = function() {
var iframe = document.getElementsByTagName('iframe')[0];
iframe.setAttribute('frameBorder', 0);
};
Then we can even apply our styles to the iframe:
iframe {
display: block;
border: thin solid gray;
}