Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set height of an iframe element using HTML?
The iFrame element is a powerful tool in HTML. It allows web developers to embed external content into a web page. It is a container that displays other HTML documents within a page. The default height of an iFrame element does not always fit with the webpage's layout. That's why we need to ensure that it's sized correctly so that it fits seamlessly into the page layout. Here, we will discuss how to set the height of an iFrame element using HTML.
Understanding the IFrame Element
iFrame stands for inline frame. It allows developers to embed content, such as videos, maps, or social media feeds, from another website or web page into the current page. The iFrame element creates a box on the page that displays the content, and it has several attributes that can be set to customize its behavior, including the width and height attributes.
Importance of Setting IFrame Height
Setting the height of an iFrame element is important for several reasons, such as −
It ensures that the iFrame content fits into the page layout, without causing unwanted scrolling or free space.
It helps improve the loading time of the page by allowing the browser to pre-render the iFrame content.
It helps improve the accessibility of the web page by allowing users to properly read the content.
Setting IFrame Height Using HTML Attributes
The common way to set the height of an iFrame element is by using HTML attributes. We can use the "height" attribute to set the height of the iFrame element. For example −
<iframe src="https://www.tutorialspoint.com/index.htm" height="300"></iframe>
The above example code will set the height of iFrame to 300 pixels.
Example 1
Here is an example to set the height of the iFrame to 300 pixels.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Setting the height of an iframe element using HTML</h3>
<iframe src="https://www.tutorialspoint.com/index.htm" height="300"></iframe>
</div>
</body>
</html>
Using CSS to set IFrame Height
The second way to set the height of an iFrame element is to use CSS. This method is helpful to making the code more organized and maintained. We can use the "height" property to set the height of the iFrame element. For Example −
<style>
iframe {
height: 250px;
}
</style>
The above example code will set the height of iFrame to 250 pixels.
Example 2
Here is an example to set the height of iFrame to 250 pixels using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
iframe {
height: 250px;
width: 450px;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Setting the height of an iframe element using CSS </h3>
<iframe src="https://www.tutorialspoint.com/market/index.asp"></iframe>
</div>
</body>
</html>
Conclusion
In the above article, we have discussed setting the height of an iFrame using HTML. The iFrame is an important step to making sure that the iFrame content fits seamlessly into the web page layout.
812 Views
