When I dont specify anything, the iframe is tiny.
If i do width:100%; height:100%;, only the height is tiny
Im new to js, html, css and such so im not sure about some of this
.iframe {
width: 100%;
height: 100%;
border: none;
}
<iframe src="https://example.com" class="iframe" title="Testing"></iframe>
Im pretty sure even if i used ‘width:1080px; height…’ they wouldn’t “fit” to the screen and resize to different browsers/devices.
Entire code:
<!DOCTYPE html>
<html>
<head>
<title>RPiCODE</title>
<meta charset="UTF-8">
<style>
.iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<iframe src="https://example.com" class="iframe" title="Testing"></iframe>
</body>
</html>
RPiCPU is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Percentage dimensions are relative to the element’s parent, except in the case of the root element (the <html> element) in which case they refer to the viewport. So it will work if you set height: 100% on the html element, the body element and the iframe element.
html, body, iframe {
height: 100%;
}
body {
background: #555;
margin: 0;
}
iframe {
display: block;
border: 0;
}<iframe src="https://example.com" title="Testing"></iframe>Alternatively you can use viewport units, vw and vh.
body {
background: #555;
margin: 0;
}
iframe {
display: block;
height: 100vh;
border: 0;
}<iframe src="https://example.com" title="Testing"></iframe>