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 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
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 learn in this article how to embed a specific part of a web page…
asked
Apu
0 answers
2915
If you want to display specific area of external website using iframe , then you will lear…
Answer Link
answered
Apu