我正在修改Dashboard示例并尝试使用iframe完全填充页面区域，因此它会延伸到边缘但我无法这样做。
基本上我有导航，侧边栏，我想用iframe完全填充页面区域但是它会水平创建边距而不会垂直拉伸iframe。
有谁知道我如何填满整个区域？如果页面缩小，如果可能的话，它还需要在响应式视图中工作。
编辑：问题是与bootstrap相关的问题，我想，也许我需要覆盖一些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>
答案 0 :(得分：17)
对于它的价值，这对我有用
<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>
答案 1 :(得分：7)
我遇到了关于iframe不接受100％身高的问题。 See this thread.
解决方案是在iframe上使用style="position:absolute;"。
答案 2 :(得分：5)
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>
答案 3 :(得分：0)
在我调整后，我通过将填充设置为0px找到了解决方案，这似乎解决了所有问题。谢谢大家的回答。 ：d
答案 4 :(得分：0)
我也试图解决类似的问题（我目前正在使用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，使用body OnLoad（）处理程序和纯javascript表达式来获取iframe的.top坐标。
如果您确定顶部栏的高度，则可以完全摆脱javascript，使用此CSS与上述相同的HTML：
<style>
#divFrameContainer { margin-bottom:6px; }
#ifrBtLingua { height: calc(100vh - 100px); width:100%; border: 1px solid #0094ff; border-radius:3px; padding-top:6px; }
</style>
（用适当的高度替换100px）
答案 5 :(得分：0)
我已经通过Bootstrap 4完成了以下操作
<iframe class="position-absolute w-100 h-100 border-0" src="https://foo.bar"></iframe>
这是我能想到的最简单的解决方案，它是“纯” Bootstrap。
答案 6 :(得分：0)
这可能对某人有所帮助 - 这是在 BS 3.3.7 上
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
答案 7 :(得分：0)
bootstrap 5 解决方案是
<div class="ratio ratio-16x9">
<iframe... [your iframe, no height/width set]> </iframe>
</div>