3schools

Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu June 03, 2023 . #css . #HowTo
❌

How to show a specific part of a website in iframe

If you want to display specific area of external website using iframe, then you will learn in this article how to embed a specific part of a web page using css.

Suppose, you want to show only one div element from another website and want to hide some specific content, then you can easily do this using <iframe> tag.

Show a specific part of a webpage in iframe 
<style>
 #div-id{
    border   : 2px solid blue;
    width    : 100%;
    height   : 200px;
    position : relative;
    overflow : hidden;
}
 #iframe-id{
    position : absolute;
    top      : -50px;
    left     : -2px;
    width    : 100%;
    height   : 200vh;
}
</style>
<div id="div-id">
 <iframe src="https://search.3schools.in/p/home.html" id="iframe-id" scrolling="no"></iframe>
</div>
Try it Yourself » How to show a specific part of a website in iframe

How to display only header of a website in iframe.

Well, Now in this example, I will show you how to show only the header area of an external website in iframe using css only.

Show only header of a website 
<style>
 #div-id{
    border : 2px solid black;
    width    : 100%;
    height   : 80px;
    position : relative;
    overflow : hidden;
}
 #iframe-id{
    position : absolute;
    top      : -5%;
    left     : 0;
    width    : 100%;
    height   : 200%;
}
@media (min-width:667px){
   #iframe-id{
    top      : -70%;
  }
  
</style>
<div id="div-id">
 <iframe src="https://search.3schools.in/p/home.html" id="iframe-id" scrolling="no"></iframe>
</div>
Try it Yourself »

Conclusion

In this article, you have learned how to show a specific part of a website in iframe using css.

Pdf
Save
Listen

Scroll Down

Write An Answer
back