мне нужно иметь 2 фрейма на одной странице, один верх другого

0

Так что мне нужно создать html-страницу с 2 iframes на одной странице, одну верхнюю часть другой... Верхняя часть займет большую часть страницы, а нижняя - около 80 пикселей высотой... Посмотреть JSFiddle ниже.

Код, который, как мне кажется, работает, но я замечаю, когда когда-либо прокручиваю определенные страницы, прокрутки немного ускоряются... это не всегда гладкий опыт прокрутки... Так что мой вопрос...

Есть ли лучший способ достичь того, что я пытаюсь сделать? или это лучший способ?

HTML

<div id="frame2">
   <iframe name="frame2" src="" style="height: 80px; width: 100%; border: none;"></iframe>
</div><!-- close div#frame2 -->

<div id="frame1">
   <iframe name="frame1" src="http://www.apple.com/" style="height: 100%; width: 100%; border: none;"></iframe>
</div><!-- close div#frame1 -->

CSS

#frame1 {
   background-color: #0099ff;
   position: absolute;
   top: 0px;
   left: 0px;
   bottom: 80px;
   right: 0px;
}

#frame2 {
   background-color: #000000;
   position: absolute;
   top: 0px;
   left: 0px;
   bottom: 0px;
   right: 0px;
}

heres jsfiddle (http://jsfiddle.net/jstormthakid/TMSwq) кода.

Любая помощь будет принята с благодарностью...

  • 0
    "определенные страницы, по которым прыгает свиток" у меня в хроме работает нормально ...
Теги:
iframe
frame

1 ответ

1

ДЕМО ЗДЕСЬ

html,body {
    height:100%;
}
.h_iframe1 iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%; 
    height:calc(100% - 120px);
}
.h_iframe2 iframe {
    position:absolute;
    bottom:0;
    right:0;
    width:100%; 
    height:120px;
}

Я не хочу, чтобы полоса прокрутки отображалась в первой демонстрации iframe здесь

.h_iframe1 iframe {
    position:absolute;
    top:0;
    width:100%; 
    height:calc(100% - 120px);
    right: -30px;   
    padding-right: 15px;
    overflow-y: scroll;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню