html iframeの要素をはみ出して表示させる方法

Question

実現したいこと

ifameで差し込んだページの一部をiframeタグで指定した値からはみ出して表示したい。

前提

WEB系のコードは初心者なので、質問の仕方が悪かったらすみません。

下の図のようにヘッダー①②があり、①のみスクロールしても動かないように固定しています。
ヘッダー①②をiframeにしているのは別のページでもヘッダー部分を使用したいためです。

ヘッダー①の一部にulタグでマウスカーソルを重ねると、表示されるメニューを付けました。

発生している問題・エラーメッセージ

iframeタグの高さ分しか画面上には表示されない為、ヘッダー①の高さのみをiframeの高さに設定したときに、メニューが切れてしまう。

該当のソースコード

index.html

<div id="header_1">
            <iframe id="h_1" src="header_1.html" frameborder="0" scrolling="NO" width="100%" height="210px"></iframe>
        </div>
        <div id="header_2">
            <iframe src="header_2.html" frameborder="0" scrolling="NO" width="100%" height="650px"></iframe>
        </div>

        <div id="main">その他要素</div>

#header_1{
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	text-align: center;
	z-index: 100;
}

header_1.html

<div id="header_navi">
    <ul id=head_tab>
        <li class="header_navi_lst">
            <a href="" target="_parent"><span class="span1">Menu</span><br><span class="span28"></span></a>
                <div class="sub_menu">
                    <div class="sub_index">
                        <p><a href="" target="_top">A</a></p>
                        <p><a href="" target="_top">B</a></p>
                        <p><a href="" target="_top">C</a></p>
                    </div>
                </div>
            </div>
        </div>
   </div>

.sub_menu{
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
}
.header_navi_lst:hover > .sub_menu {
	visibility: visible;
	opacity: 0.8;
	z-index: 100;
}

試したこと

iframeのheightの数値を大きくして、メニューの要素が表示されるように設定しましたが、ヘッダー①をスクロール固定でおいておくために#h_1のz-indexの値を他より高く設定したため、iframeの高さ分ヘッダー②以下の要素がクリックできなくなってしまいました。

Answer 1

htmlのidの競合回避やcssの適用範囲の調整が必要ですが、とりあえず

window.addEventListener('DOMContentLoaded',async()=>{
  header_1.innerHTML=await fetch('header_1.html').then(res=>res.text());
});

Answer 2

<iframe> のコンテンツは、<iframe> 要素のボックスの範囲を超えて描画することはできません。例外はフォームコントロールから出るポップアップ(<select>のメニューや<input type=date>のカレンダー)ぐらいです。

• <iframe> でヘッダを作るのを諦めて、テンプレートエンジンなどを使ってヘッダを共通化する、または
• .header_navi_lst にホバーしている間だけ <iframe> の高さを伸ばすよう JavaScript でコードを組む

保守性や拡張性を考えると前者のほうがおすすめです。