How ToJavaScriptMake Web StoriesQuiz GeneratorFAQ Schema GeneratorTable Maker3schools TranslateMore Tools..
Apu
Apu 10/01/2022

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 How to show a specific part of a website in iframe using css.

Share

How to show a specific part of a website in iframe

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

Write an Answer

Related Posts
Write an answer
back