Home >Web Front-end >HTML Tutorial >Iframe nests frameset to realize scroll bars appearing in the entire iframe. How to display all the content according to the height of the page? _html/css_WEB-ITnose
Iframe nests frameset to realize scroll bars appearing in the entire iframe. How to display all the content according to the height of the page? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:19:071378browse
The website I made uses a frameset frame layout, which is divided into upper, middle and lower parts. The content of the upper and lower frames is fixed, but the content of the middle frame is different. I want the entire frame to share a scroll bar, so I use an iframe. In the nested frameset frame, I set the height in the iframe. The content of the page is different, and the height is also different. Is there any way to display all the content of the page? I've been struggling for two days, it's urgent, I'm waiting online! Please help me heroes!
Reply to the discussion (solution)
Dynamically calculate the height of the middle frame, add the upper and lower heights to the
, and assign them to the style.height of the outer iframe.How to calculate dynamically? Could you please make it clearer?
h = document.documentElement?document.documentElement.offsetHeight:document.body.offsetHeight
Is this the height of the page in the subframe?
It’s strange that two iframes can share a scroll bar
c28064e3032c332c744da94fc7f7efc9
210cf0e410d4331b8e7c18678a441d7f
1b1cc426c78094ef17dee1ab06885a19
ec10a15a6dca28dac92e72d24806ab48
eb5f059992a0ae0ef16884cb75644e40
37f861bd36cef5b6406eba87d20a5bab6c04bd5ca3fcae76e30b72ad730ca86dThis is My frame layout page,
-------------------------------
< ;script language="javascript">
function iFrameHeight(iframeID){
var ifm= document.getElementById(iframeID);
var subIfm = ifm.contentWindow.document.documentElement.scrollHeight;
if(ifm != null && subIfm != null){
ifm.height = subIfm;
}
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
4547db994f7ad1acb88b412e7193d58b
1b078db4cd2c7fce6a022d3f0dadc112
This is the page where I introduced the frame layout
This is the middle frame, you Add the fixed heights of the upper and lower frames, and then "px"
They are not two iframes
I added the height of the upper and lower frames, but the page content of the middle frame is different and the height is also different. It's different. I can't get the height of the middle page?
I added the height of the upper and lower frames, but the page content of the middle frame is different, and the height is also different. I can't get the height of the middle page?
Didn’t I tell you about dynamic calculation? ? ?
Give you a complete example
a.htm
<!DOCTYPE html><html><head><title></title></head> <body><iframe id=foo src="frameset.htm"></iframe></body></html>
frameset.htm
<frameset rows="100,*,100"><frame src="top.htm"><frame src="middle.htm"><frame src="bottom.htm"></frameset>
middle.htm
<script>function setHeight(){ h = Math.max(document.documentElement.offsetHeight,document.body.offsetHeight) window.parent.parent.document.getElementById("foo").style.height = 100+h+100 + 50+"px"; //为了保证效果，多加50}</script><style>html,body{margin:0;padding:0}</style><body onload="setHeight()">foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/>foo<br/> Note that the test should use http method, do not directly say file method test
Give you a complete example
a.htm
HTML code
8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
876b93cf036374e16b8305ea9d3dc9a5
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
0aecc9d61aa8123a64f6e672e53fb76d065276f04003e4622c4fe6b64f465b88
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
frameset.htm
HTML code