今時ないですが、スマホでiframeを使うことになりました。ヘッダー部分をiframeで読み込むことになり、メニューをクリックすると下にサブナビが出てくる感じです。

Question

ヘッダーのメニューをiframeで読み込むよう依頼がありました。
headerの仕様は、クリックした時に下にアコーディオンする、というものです。
iframeは最初に読み込まれた高さのままになるため、
アコーディオンになる部分が表示されません。
逆に、最初から高さをアコーディオン込みの高さになるよう調節したのですが、
その分変に下にネガティブmarginつけたり等々しなければならず、
その後不具合が出てしまったのでやり直しになりました。

解決できず非常に困っています。
よろしくお願いいたします。

Answer 1

じゃあメニューと同じ大きさのdivを作って
その中にposition:absoluteでiframeを配置って感じで

しかし不可視なiframeの領域が上からかぶるとか
pointer-eventsをこねこねしなくちゃいけなさそうで
なにかとややこしそうですね