时间戳

首页 > 解决方案 > 如何解决手机上的 iframe 高度问题

html - 如何解决手机上的 iframe 高度问题

问题描述

我制作了一个横幅列表，然后将我的网站放在桌面上，在移动设备上切割横幅没有问题。

移动视图

移动视图

这是我的 iframe 放置代码：

<iframe scrolling="no" width="75%" height="670"src="/html/banners.html"></iframe>
<style>
   iframe {
   margin: 0 auto;
   display: block;
   }
   @media(min-width:480px) {
   iframe {
   height:750px !important;
   }
</style>

这是我的横幅列表代码：横幅列表代码

我该如何解决这个高度问题？你能帮帮我吗？非常感谢。

标签： htmlcssiframe

解决方案

您可以在 iframe 周围添加包含包装器。

<div class="iframe-container">
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" allowfullscreen="" frameborder="0">
</iframe>
</div>

然后。你可以添加css。

.iframe-container{
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.iframe-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

推荐阅读