Как сделать iframe 100% без полосы прокрутки

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

Попробуйте установить переполнение-у к скрытым.

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

Answer 2

здесь вы идете. информация о vh and vw units.!

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

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