How to show a specific part of a website in iframe

Question

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.

Write Your Answer

Apu · Accepted Answer · 2023-06-03T07:47:30+05:30

If you want to display specific area of external website using iframe , then you will lear…