[英]Bootstrap 3 - Fill an area with an Iframe 100%
我正在修改仪表板示例并尝试用 iframe 完全填充页面区域，以便它延伸到边缘，但我在这样做时遇到了麻烦。
基本上我有导航、侧边栏，我想用 iframe 完全填充页面区域，但它会在水平方向上创建一个边距，并且不会垂直拉伸 iframe。
有谁知道我怎样才能填满整个区域？ 如果页面缩小了，如果可能的话，它也需要在响应式视图中工作。
编辑：我认为问题与引导程序有关，也许我需要覆盖一些 CSS 或更改列设置？
编辑 2：好的，我已经回答了我的问题，现在在添加新的 css 规则并稍微调整引导程序代码后，它会拉伸整个区域，但是我现在需要去掉一点边距/边框，如果我使用绝对它使 iframe 离开页面的右侧，而不是向右移动到边缘，关于如何使用整个区域的任何想法？ 我对 Bootstrap 有点陌生，所以我可能只需要稍微调整一下。
我目前的代码：
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="resources/favicon.ico">
<title>Website</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/dashboard.css" rel="stylesheet">
<style type="text/css">
body,html,.main-display-area,.col-md-10 {
height:100%;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="">Overview</a></li>
<li><a href="">Reports</a></li>
<li><a href="">Analytics</a></li>
<li><a href="">Export</a></li>
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
</div>
<div id="frame" class="col-md-10 col-md-offset-2 main">
<iframe src="http://www.w3schools.com" id="frame" frameborder="0" style="width: 100%; height: 100%;"></iframe>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
对于它的价值，这对我有用
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<iframe style="width: 100vw;height: 100vh;position: relative;" src="https://example.com" frameborder="0" allowfullscreen></iframe>
</div>
</div>
我遇到了 iframe 不接受 100% 高度的问题。 看到这个线程。
解决方案是使用style="position:absolute;" 在 iframe 上。
100% 高度表示可用高度的 100%。 由于没有任何事情发生，这足以让 iframe 显示。
您需要强制某些东西打开所述 iframe 的容器以拥有页面的所有可用高度，以便 100% 高度可以满足您的需求，填充所有空间。
这是一个烦人的问题=p
我经常用javascript解决，捕获视口高度并手动将容器高度设置为必要的高度。 小心不要设置更多，否则你会得到一个侧滚动条，因为它会溢出。 如果您想尝试，这里是我用来获取窗口（视口）大小的函数。 这是您的 HTML（我删除了一些内容以使其更小，但我对其进行了完整测试）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- links might vary, my folder is different. Also, adding these at the end for "speed" is bs, it often causes scripts to fail -->
<script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="">Overview</a></li>
<li><a href="">Reports</a></li>
<!-- ... -->
<li><a href="">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-md-10 main">
<!-- note: you should not add the offsets, removed them. Also note this is inside the row, your original wasan't -->
<iframe id="iframeid" src="http://www.google.com" style="width:100%; height:100%;margin:0px;border:0px"></iframe>
</div>
</div>
</div>
<script type="text/javascript">
function windowDimensions() { // prototype/jQuery compatible
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE or IE 9+ non-quirks
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 5- (lol) compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
if (myWidth < 1) myWidth = screen.width; // emergency fallback to prevent division by zero
if (myHeight < 1) myHeight = screen.height;
return [myWidth,myHeight];
}
var dim = windowDimensions();
myIframe = $('#iframeid'); // changed the code to use jQuery
myIframe.height((dim[1]) + "px");
</script>
</body>
</html>
经过我的调整后，我通过将填充设置为 0px 找到了解决方案，这似乎解决了所有问题。 谢谢大家的回答。 :D
我也试图解决类似的问题（我目前在 Bootstrap 4 上）。 我的布局顶部有一个<div> ，其中包含控件，底部有一个<iframe>用于内容，它必须填充页面的剩余高度（如果需要，可以使用滚动条）。 我在此处添加了侧边栏以重现原始问题。
我使用 calc() 和 vh 单位解决了它：
CSS：
<style>
#toolbarContainer { margin-bottom:6px; }
#myIframe { width:100%; border: 1px solid #0094ff; border-radius:3px; }
</style>
HTML：
<body>
<div class="container-fluid">
<div id="toolbarContainer">
<div class="row"> [content here]</div>
<div class="row"> [more content here]</div>
</div>
<div class="row">
<div class="col-3 col-md-2" id="sidebar">
<div class="alert alert-info">Sidebar content here</div>
</div>
<div class="col-9 col-md-10">
<iframe id="myIframe" src="about:blank"></iframe>
</div>
</div>
</div>
</body>
JAVASCRIPT（放在</body>结束标记之前）：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
document.getElementById('myIframe').style.height = 'calc(100vh - ' + ($('#myIframe').offset().top + 25) + 'px)';
});
</script>
我在 Chrome、IE11、Edge 和 Firefox 中对此进行了测试，并且在正确处理浏览器窗口大小调整（包括 . 我不知道为什么我必须将常数 +25 添加到计算中，它只是有效。 通过稍微更改该数字，您可以增加/减少 iframe 下方的白边距。
如果需要，您可以轻松摆脱 jQuery，使用主体 OnLoad() 处理程序和纯 javascript 表达式来获取 iframe 的 .top 坐标。
如果你确定你的顶栏的高度，你可以完全摆脱 javascript，使用与上面相同的 HTML 的 css：
<style>
#divFrameContainer { margin-bottom:6px; }
#ifrBtLingua { height: calc(100vh - 100px); width:100%; border: 1px solid #0094ff; border-radius:3px; padding-top:6px; }
</style>
（将 100px 替换为适当的高度）
我已经使用 Bootstrap 4 完成了以下操作
<iframe class="position-absolute w-100 h-100 border-0" src="https://foo.bar"></iframe>
这是我能想到的最简单的解决方案，它是“纯”Bootstrap。
这可能对某人有所帮助 - 这是在 BS 3.3.7 上
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
引导程序 5 解决方案是
<div class="ratio ratio-16x9">
<iframe... [your iframe, no height/width set]> </iframe>
</div>
如何使用 Bootstrap（我猜）让 iframe 填充剩余屏幕区域的宽度和高度？
[英]How to have iframe fill width and height of remaining screen area, using Bootstrap ( I guess)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.