How to make an HTML IFRAME responsive
How to make a HTML IFRAME responsive
Step 1 :
Create an iframe in a DIV class:
<div class="myIframe">
<iframe src="YourWebSiteURL.com"> </iframe>
</div>
Step 2:
Now create a CSS style in your Head tag:
<html>
<head>
<style>
.myIframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling:
border: solid black 1px;
}
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling:
border: solid black 1px;
}
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
You are all set !!!
Note: The iframe which is in the DIV in related to the .myIframe in the <style> . if you have question please comment below or download this mobile app: https://play.google.com/store/apps/details?id=jbej90.automation.test.haitiangeek
Commentaires
Enregistrer un commentaire