如何在没有滚动条的情况下使 iframe 100%

Question

我正在尝试代表网站的移动版本。我使用没有滚动的 iframe，并使用自定义滚动条创建了 div。它几乎可以工作，只是每个背景图像都被放大了。只要看看小提琴的例子，你就会明白我的意思。我认为这是因为我将高度设置为固定 6000，但我无法弄清楚如何在没有 iframe 滚动条的情况下使 iframe 的高度为 100%。有人可以帮助在没有滚动条的情况下制作 iframe 100%，但在这个小提琴示例中使用固定宽度和自定义 div 滚动条。 http://jsfiddle.net/KMzgm/3387/

 .scroll {
   width: 500px;
   height: 500px;

   overflow: scroll;
}
.scroll::-webkit-scrollbar {
    width: 12px;
}


.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

    <div class="scroll">

 <iframe src="http://spruce.yourwebsite.directincorporation.com/home/" height="6000" width="400"
scrolling="no" frameborder="0"></iframe>

</div>

Answer 1

尝试将overflow-y设置为隐藏。

iframe {
  width:500px;
  height: 500px;
  overflow-y: hidden;
}

Answer 2

给你。 阅读 vh and vw units.！

http://jsfiddle.net/KMzgm/3389/

    .scroll {
   width: 500px;
   height: 100vh;}