Show Part of a Page in an iFrame

Sometimes you may come across a need to show part of a web page inside another page. iFrames can be used to embed websites inside another site but they’re often used to show all of a page’s content. If you only want to show part of a page like in the bottom right corner, one approach is to use an overlapping div with hidden overflow and absolute positioning of the iframe within it. Consider the following code. Copy it, replace the URL, and adjust values as necessary.

[cc lang=”html”]

[/cc]

[cc lang=”css”]
div.iframe-container {
overflow: hidden;
margin: 15px 0 0 0;
width: 318px;
height: 488px;
position: relative;
}
div.iframe-container iframe {
position: absolute;
top: -128px;
left: -623px;
}
[/cc]

If you’re iframe contains a page that you don’t want users to see within the iframe, you can use a technique called framebusting to have your iframed page bust out of the iframe.