How stick Iframe on top of current page?
Question
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>
2 answers
solution1
1 2014-12-09 11:59:23
Try the css parameter position: fixed; .
Good luck
solution2
1
试试这个，我认为这可以解决。
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.