我有一个带有标题和 iframe(外部)的网页,用于加载不同的网页作为内容。其中一个网页还有一个 iframe(内部)和侧边栏。将网页加载到内部 iframe 时,当我单击跳转到网页的特定锚点时,外部 iframe 外部的标题消失了。怎么解决这个问题?
外部 iframe 的代码
<body>
<header>
<img src="image" height="100px" style="float: left; ">
<h1><center>text</center></h1>
<div class="navbar">
<button class="btn" onclick="myFunction0()">Welcome</button>
...
</div>
</header>
<iframe id="Myinframe"
width="100%"
height="600px"
style="border: none;"
src="welcome.html"
</iframe>
</body>
侧边栏和内部 iframe 的代码:
<body>
<div class="container">
<div class="sidebar">
<ul>
<li><a href="1.html" target="content">Text</a></li>
....
<li><a href="4.html#anchor" target="content">Text</a></li>
</ul>
</div>
<div class="content">
<iframe name="content" src="default.html"></iframe>
</div>
</div>
</body>
无论我在 iframe 中进行更改,我希望标头部分保持不变。然而,虽然跳转到 1.html 有效,但当单击 4.html#anchor 时,标题将消失。
发现页眉被滚动出去了。因此,我没有固定外部 iframe 的高度,而是使用 height: calc(100vh - 150px) 来减去标题,它就可以工作了。