我的iframe有问题！如何使iframe的内容充满屏幕？
提前谢谢。
照片：
电流输出
想要输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<iframe src="http://octopi/webcam/?action=stream" style="position:absolute; width:100%; height:100%; overflow:hidden">
Your browser doesn't support iframes
</iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/qL-ry_tz6V0" style="width:100%; height:100vh; overflow:hidden">
Your browser doesn't support iframes
</iframe>
</div>
</body>
</html>你可以使用这个：高度：100vh
-
首先使用
*{}通用选择器为所有对象设置margin: 0; padding: 0;，以便所有对象都适合屏幕注意：这是一个重置CSS代码，因此如果不小心处理，它可能会影响其他设计 -
然后为iframe设置
width:100%; height:100vh; overflow:hidden此处vh表示视图高度 -
将
border: 0 solid transparent;设置为iframe以删除边框注意：如果你想保留边界，那么使用CSS的calc()函数从宽度和高度中减去边界的厚度
然后您的iframe将适合屏幕！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/qL-ry_tz6V0">
Your browser doesn't support iframes
</iframe>
</div>
<style>
*{
margin: 0;
padding: 0;
}
iframe{
width:100%;
height:100vh;
overflow:hidden;
border: 0 solid transparent;
}
</style>
</body>
</html>