Question

我正在尝试通过iframe将my blog集成到我的网站中。但是，使用此方法我必须以像素为单位给出高度和宽度。不过，我希望博客适合屏幕。有没有办法做到这一点？

编辑：下面的答案表明我改变了我的CSS。那我该怎么处理html中的“width”和“height”变量呢？这是该页面的完整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>

我没有指定宽度和高度，因为我不知道之后要放入什么。

Answer 1

是的，要全屏使用css上的代码：

html, body, div, object, iframe, fieldset { 
margin: 0; 
padding: 0; 
border: 0;

}

编辑：最后在您的CSS中包含这些内容，您的HTML代码必须是这样的：

<iframe src="http://shilohgameblog.wordpress.com"></iframe>

你需要取消HTML代码上的所有其他内容，因为你已经把它放在你的CSS上了

Answer 2

试试这个。它对我很有用。

    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;
    }

Answer 3

如果你想让iFrame成为页面的宽度（所以它的响应），你需要做的就是：

<iframe width="100%" height="315" src="https://www.youtube.com/embed/ENTERVIDEOID" frameborder="0" allowfullscreen></iframe>

我使用YouTube视频完成了此操作，但您可以在不干扰任何其他内容的情况下执行此操作。您还可以将高度更改为100％。

iframe适合屏幕

3 个答案: