我正在尝试通过 iframe 将 我的博客 集成到我的网站中。但是,使用这种方法我必须给出以像素为单位的高度和宽度。不过,我希望博客适合屏幕。有什么办法可以做到这一点吗?
编辑:下面的答案建议我更改我的CSS。那么我该如何处理 html 中的“宽度”和“高度”变量呢?这是页面的完整 html 代码。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Shiloh Janowick's Blog!</title>
<link rel="shortcut icon" href="pics/favicon.ico" type="image/x-icon">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<iframe width="" height="" src="http://shilohgameblog.wordpress.com" frameborder="0" allowfullscreen></iframe>
</body>
</html>
我没有指定宽度和高度,因为我不知道之后要放入什么。
试试这个。 这对我来说非常有用。
body {
margin: 0;
padding: 0;
}
iframe {
display: block;
width: 100vw;
height: 100vh;
max-width: 100%;
margin: 0;
padding: 0;
border: 0 none;
box-sizing: border-box;
}
是的,要获得全屏,请在您的 css 上使用此代码:
html, body, div, object, iframe, fieldset {
margin: 0;
padding: 0;
border: 0;
}
编辑:在你的CSS最后添加它,你的html代码必须是这样的:
<iframe src="http://shilohgameblog.wordpress.com"></iframe>
您需要删除 HTML 代码上的所有其他内容,因为您已经将其放在 CSS 中
如果你想使 iFrame 与页面的宽度相同(因此它是响应式的),你需要做的就是:
<iframe width="100%" height="315" src="https://www.youtube.com/embed/ENTERVIDEOID" frameborder="0" allowfullscreen></iframe>
我已经通过 YouTube 视频完成了此操作,但您可以在不干扰其他任何内容的情况下完成此操作。您还可以将高度更改为 100%。