的Iframe适合屏幕

我试图通过iframe来my blog整合到自己的网站。但是，使用这种方法，我必须给出像素的高度和宽度。不过，我想让博客适合屏幕。有没有办法做到这一点？的Iframe适合屏幕

编辑：下面的答案表明，我改变我的CSS。那么我该如何处理html中的“width”和“height”变量呢？以下是该页面的完整HTML代码。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
\t <link rel="stylesheet" type="text/css" href="css/style.css" /> 
 
\t <title>Shiloh Janowick's Blog!</title> 
 
\t <link rel="shortcut icon" href="pics/favicon.ico" type="image/x-icon"> 
 
\t <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> 
 
\t <meta http-equiv="Pragma" content="no-cache" /> 
 
\t <meta http-equiv="Expires" content="0" /> 
 
</head> 
 

 
<body> 
 

 
\t <iframe width="" height="" src="http://shilohgameblog.wordpress.com" frameborder="0" allowfullscreen></iframe> 
 

 
</body> 
 

 
</html>

我离开的宽度和高度不确定，因为我不知道要放什么东西在他们之后。

来源

2016-01-16 Shiloh Janowick

是，获得全屏幕使用此代码对你的CSS：

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

}

编辑：包括你的CSS在结束你的HTML代码必须是这样的：

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

你需要脱掉一切的HTML代码，因为你已经把那你的CSS

来源

2016-01-16 15:25:48

谢谢！还有一个问题。我有几个YouTube视频嵌入到我的网站。它们也适合屏幕吗？ –

在YouTube上有点相同，但你需要一个这样的网址：https://www.youtube.com/embed/l8qrqkZApf0了解如何只使用单词嵌入和YouTube视频在自动链接适合全屏 –

上我更新了更详细的答案 –

如果你想使一个iFrame网页的宽度（所以它的响应），所有你需要做的是：

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

我已经与YouTube视频做到了这一点，但你可以做到这一点，而不会干扰其他任何事情。您也可以将高度更改为100％。

来源

2017-04-16 05:03:57

试试这一个。它为我的伟大工程。

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

来源

2018-01-18 11:40:58 vitralyoz

的Iframe适合屏幕

回答

相关问题