我需要一个具有自动高度的 iframe(没有垂直滚动，它应该占用它需要的所有空间并且滚动主页就好了)。
这不会发生在我当前的代码中:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap IFrame Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-6">Check the iframe at the right</div>
<div class="col-xs-6">
<div style="width:100%; height:auto;">
<iframe src="http://www.wsj.com/" style="width:100%; height:auto;overflow-y:hidden"></iframe>
</div>
</div>
</div>
</body>
</html>
最佳答案
不幸的是，根据 w3schools 这是不可能的
Differences Between HTML 4.01 and HTML5 In HTML 4.01, the height could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.
您唯一可以做的黑客攻击是以下 CSS 代码:
html, body, div, iframe {
height: 100%;
}
/* OR */
*{
height: 100%;
}
此代码使页面中的所有内容都达到 100% 高度，从而也让您的 iframe 进行调整。但就像我提到的，一路上你会遇到重大问题。我这样做的唯一方法是设计一个仅用于打印的报告屏幕(即优惠券兑换屏幕，或仅用于移动应用程序的小广告)
再次。我强烈不鼓励任何人在普通的网络应用程序中尝试这个
参见 DEMO显示全高
关于css - 具有自动高度且无垂直滚动的 iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34713410/