时间戳

首页 > 解决方案 > 是否可以使用 HTML 和 CSS 使 iframe 真正响应？

iframe - 是否可以使用 HTML 和 CSS 使 iframe 真正响应？

问题描述

我有一些简单的 iframe 代码。我想在网页中无缝显示网页，即没有滚动条

我尝试过隐藏溢出，但我似乎无法正确处理

HTML

 <iframe name="Framename"     src="https://website"
 width="100%" height="100%" frameborder="0" scrolling="auto" 
 class="frame- 
 area">
 </iframe>

CSS

.frame-area {
  display: block;
  width: 100%;  /* RESPONSIVE WIDTH */
  max-width: 100%;
  height: 100%;
  overflow: hidden;  /* EDIT TO hidden FOR NO SCROLLBAR */
  border: #999999 1px solid;
  margin: 0px;
  padding: 0px;
  }

我得到的结果是一个只有少量高度的全宽页面

我希望它显示完整的宽度和高度并完全响应

标签： iframe

解决方案

要使页面的 iframe 完整高度和宽度，请使用此 css 和 iframe 标记。

[编辑]由于您的评论，我已经编辑了一个页脚，因此它可以与页脚一起使用。由于 iframe 的高度为 100%，因此页脚消失了，并将其推到了底部，这导致出现了滚动条。请参阅下面的修复程序。

在下面的示例代码中，请注意页脚的 CSS 显示 30px 高度。所以 iframe 应该比屏幕高度小 30px 以留出页脚空间。这可以使用 height:calc(100% - 30px); 当然，将页脚的实际高度替换为 30 像素。

body {
    margin:0;
    padding:0;
}

.frame-area {
    position:absolute;
    height:calc(100% - 30px); /* example below if your footer is 30px in height */
    width:100%;
    border:none;
}

footer {
    position:absolute;
    bottom:0;
    height:30px; /* match this height in your iframe width calc value */
}

使用上面的 CSS，您可以简化 iframe 标记的格式： 

<iframe name="Framename" src="https://website" class="frame-area"</iframe>
<footer>This is the footer</footer>

推荐阅读