Question

我正在尝试代表该网站的移动版本。我使用没有滚动的iframe并使用自定义滚动条创建了div。它几乎可以工作，除了每个背景图像都放大了。只要看一下小提琴的例子，你就会明白我的意思。我认为这是因为我将高度设置为固定6000，但我无法弄清楚如何使iframe的高度为100％而没有iframe的滚动条。有人可以帮助制作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;}

如何使iframe 100％没有滚动条

2 个答案: