嵌入响应显示底部的白色边框

时间:2015-09-01 05:56:28

标签: javascript html css twitter-bootstrap iframe

我有一个网页,使用html显示另一个iframe页面。请参阅下面的代码。

<html>
<head>
<title>DotWifi</title>
<meta http-equiv="Pragma" content="no-cache">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="http://www.xxxx.com/xxxxxx/xxpage?xxxId=123&tok=$tok&authaction=$authtarget"></iframe>
</div>
</body>
</html>

我尝试使用iframe类使用embed-responsive-item来显示自适应网页。但它底部显示白色边框。请参见下图。

enter image description here

1 个答案:

答案 0 :(得分:1)

这不是边界,只是身体的背景。

iframe的父div embed-responsive-4by3应该有4到3的宽高比。这就是这个课的作用!因此,如果宽度为416像素(窗口的宽度),则高度变为312像素 这就是它的全部内容。

如果您不想这样做,解决方法是从div中删除embed-responsive-4by3类。

或者,如果您的所有页面都在iframe中显示另一个页面,您可以完全省去Bootstrap并在页面上只放置iframe!