HTML/CSS: Почему прокрутка не работает в iframe?

Question

У меня есть сайт с 3 фреймами, и ни один из них не работает, хотя текст длиннее окон: в Firefox появляются полосы прокрутки, но не работают; в Chrome полоски даже не появляются. Они прокручиваются в IE 6.

Так что я подозреваю, что есть проблема с CSS. Наверное, это нечто тривиальное, но я не вижу его.

код CSS:

.header 
{ 
position:fixed; 
top:0%; 
right:0%; 
height:4%; 
width:100%; 
text-align:center; 
background-color:#BF1E4B; 
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; 
z-index:+1; 
} 

.nav,.nav ul 
{ 
list-style:none; 
margin:0.5%; 
padding:0; 
} 

.nav 
{ 
top:0%; 
left:0%; 
position:absolute; 
} 

.nav ul 
{ 
height:0; 
left:0; 
position:absolute; 
overflow:hidden; 
top:100%; 
} 

.nav li 
{ 
float:left; 
position:relative; 
} 

.nav li a 
{ 
-moz-transition:0.1s; 
-o-transition:0.1s; 
-webkit-transition:0.1s; 
background-color:#BF1E4B; 
color:#fff; 
display:block; 
font-size:100%; 
line-height:100%; 
padding:4px 35px; 
text-decoration:none; 
transition:0.1s; 
} 

.nav li:hover > a 
{ 
background:#000; 
color:#fff; 
} 

.nav li:hover ul.subs 
{ 
height:auto; 
width:100%; 
} 

.nav ul li 
{ 
-moz-transition:0.1s; 
-o-transition:0.1s; 
-webkit-transition:0.1s; 
opacity:0; 
transition:0.1s; 
width:100%; 
} 

.nav li:hover ul li 
{ 
opacity:1; 
-moz-transition-delay:0.1s; 
-o-transition-delay:0.1s; 
-webkit-transition-delay:0.1s; 
transition-delay:0.1s; 
} 

.nav ul li a 
{ 
background:#BF1E4B; 
color:#fff; 
line-height:0%; 
-moz-transition:0.1s; 
-o-transition:0.1s; 
-webkit-transition:0.1s; 
transition:0.1s; 
} 

.nav li:hover ul li a { 
    line-height:150%; 
} 

.nav ul li a:hover 
{ 
background:#000; 
} 

.iframe1 
{ 
position:fixed; 
bottom:48%; 
right:0%; 
height:48%; 
width:50%; 
} 

.iframe2 
{ 
position:fixed; 
top:4%; 
left:0%; 
height:96%; 
width:50%; 
} 

.iframe3 
{ 
position:fixed; 
top:52%; 
right:0%; 
height:48%; 
width:50%; 
} 

К сожалению для любительского взгляда, и заранее спасибо :)

HTML код:

<div class="header"> 
<ul class="nav"> 

<li><a href="">Links</a> 
<ul class="subs"> 
<li><a href="xxx" target="_blank">link</a></li> 
<li><a href="xxx" target="_blank">link</a></li> 
<li><a href="xxx" target="_blank">link</a></li> 
</ul> 
</li> 

</li> 
</ul> 
<div style="clear:both"></div> 
</div> 

<div class="iframe1"> 
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe> 
</div> 

<div class="iframe2""> 
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe> 
</div> 

<div class="iframe3"> 
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe> 
</div> 

Answer 1

Как было сказано выше Джавид, overflow:scroll на элементах Iframe , хотя я думаю, что использование position:fixed может вызвать проблемы в некоторых браузерах на основе того факта, что он блокирует элементы относительно прокрутки страницы. Подумайте об использовании position:absolute, хотя я ничего не знаю о вашей ситуации.

Answer 2

попробовать играть со значением Z-индекс, вы можете покрыть его, изменить его до 1000 в IFRAME и вижу, что вы до сих пор не могу использовать его

{ 
    z-index: 1000; 
}