CODEWITHSUNDEEP
javascripthtmlcssiframe
user2104560
user2104560

Reputation:

How stick Iframe on top of current page?

I want lo load dropdown menu from other application and want to make it as a header with iframe. Surely, dropdown menu can be expanded and thus become larger.

Usual iframe provides a scroll which allows to see all contents of iframe but it looks not good for me. I want to stick iframe on top of web page such that expanded menu items will be rendered on top of page contents. I don't want scrolls and I don't want rubber iframe. Rubber iframe may take a large amount of screen space.

Absolute positioning and z-index didn'd do the trick. Is there any other ways to solve this problem?

My html is the following:

<html>
<head>
</head>
<body>
 <iframe style="height:45px;width:100%;position:absolute;top:0px;left:0px;z-index:40" src="http://localhost:8080/app" scrolling="no" frameborder="0px"></iframe>
<div style='position:absolute;left:0;right:0;top:45px;bottom:0;overflow:auto;'>Your body content</div>     
 </body>

Upvotes: 0

Views: 3064

Answers (2)

user4281203
user4281203

Reputation:

try this,I think this would solve.

<iframe style="height:45px;width:100%;position:fixed;top:0px;left:0px;z-index:40" src="http://localhost:8080/app" scrolling="no" frameborder="0px"></iframe>

Upvotes: 1

Joe Inner
Joe Inner

Reputation: 1470

Try the css parameter position: fixed;.

Good luck

Upvotes: 1

Related Questions