Question

我需要一个具有自动高度的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>

Answer 1

不幸的是，每w3schools

都无法做到这一点

HTML 4.01和HTML5之间的差异在HTML 4.01中，高度可以以像素或包含元素的％来定义。在HTML5中，值必须以像素为单位。

你可以做的唯一的黑客，这是一个巨大的红色和闪烁的灯光标志是以下CSS代码：

html, body, div, iframe {
    height: 100%;
}

/*  OR */

*{
    height: 100%;
}

此代码会使您网页中的所有内容都达到100％的高度，从而也可以让您的iframe进行调整。但就像我提到的那样，你将会遇到重大问题。我这样做的唯一方法是设计一个仅用于打印的报告屏幕（即优惠券兑换屏幕，或仅用于移动应用程序的小广告）

<强>一次。我强烈反对任何人尝试使用普通的网络应用程序

查看显示全高的DEMO

iframe具有自动高度且无垂直滚动

1 个答案: