18

我需要在框架内嵌入一个 HTML 页面，并使用以下代码：

<iframe src="http://www.google.com" style="width: 90%; height: 300px"
    scrolling="no" marginwidth="0" marginheight="0" frameborder="0"
    vspace="0" hspace="0">

我正在尝试将高度设置为自动，以便框架自动调整到页面长度，而不必像我在这里所做的那样对高度进行硬编码。我试过了height:auto，height:inherit但没有用。

4

4 回答 4

20

试试这个编码

<div>
    <iframe id='iframe2' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
        width: 100%; position: absolute;"></iframe>
</div>
于 2013-11-12T12:10:48.057 回答
10

Solomon 关于引导程序的回答启发我添加引导程序解决方案使用的 CSS，这对我来说非常有效。

.iframe-embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.iframe-embed-wrapper {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.iframe-embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
<div class="iframe-embed-wrapper iframe-embed-responsive-16by9">
    <iframe class="iframe-embed" src="vid.mp4"></iframe>
</div>
于 2018-11-08T16:21:58.147 回答
4

如果您是像 Bootstrap 这样的框架，您可以使用以下代码段使任何 iframe 视频响应：

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="vid.mp4" allowfullscreen></iframe>
</div>
于 2018-05-07T22:10:32.990 回答
2

如果站点位于不同的域中，由于跨浏览器域的限制，调用页面无法访问 iframe 的高度。如果您可以访问这两个站点，则可以使用文档域 hack。那么 anroesti 的链接应该会有所帮助。

于 2013-03-06T21:47:08.363 回答