CODEWITHSUNDEEP
csshtmliframeframe
JStormThaKid
JStormThaKid

Reputation: 1796

i need to have 2 iframes on one page, one top of the other

So i need to create an html page with 2 iframes on one page, one top of the other... The top one will take up most of the page and the bottom one will be about 80px high... View JSFiddle below.

The code i have seems to work but I notice when ever I scroll certain pages the scroll jumps around a bit... its not always a smooth scrolling experience... So my question is...

Is there a better way of achieving what I am try to do? or is this the best way?

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 a jsfiddle (http://jsfiddle.net/jstormthakid/TMSwq) of the code also.

Any help would be greatly appreciated...

Upvotes: 1

Views: 7390

Answers (1)

4dgaurav
4dgaurav

Reputation: 11496

DEMO HERE

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;
}

I you want no scroll bar visible in first iframe demo here

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

Upvotes: 2

Related Questions