iframeで表示させたhtmlのドロワーをiframの外に出せますか？

こんにちは。いつもお世話になっています。

ハンバーガーメニューを持ったHTMLファイル
r-smartphone_originalmenu.html
を作成し、別のiFrameで特定の場所に共通のメニューとして表示させています。
（メニューそのもの直接書けないのは、楽天のRMSの仕様上、iframeを使うしか手段がない為です。）

ハンバーガーを押したときに、出てくるドロワーは、当然iframeの中に入り込んでしまうため、途中から見えなくなってしまいます。
（スクロールはできますが）

このハンバーガーを押したときにドロワーがiframeの外側に表示されるようにすることは可能なのでしょうか？
（ドロワーがスマホの上下一杯にかつ、商品画像などの上に展開されるようにしたいです。）
もしできない場合は、現在、上下一杯に広がるドロワーの高さを、スマホの上部から指定できますでしょうか？

【r-smartphone_originalmenu.html】

<div class="mobile-menu-overlay"></div>
　<div class="mobile-menu-container">
　　<div class="mobile-menu-wrapper">
　　　<span class="mobile-menu-close"><i class="icon-close"></i></span><!-- ×ボタン -->
　　
　　　<!-- ここにドロワー内のメニューや検索窓を書いてあります。 -->

【r-smartphone_originalmenu.html】
オーバーレイ部分が<div class="mobile-menu-overlay"></div>
メニュー本体は<div class="mobile-menu-container">
<div class="mobile-menu-wrapper">
<span class="mobile-menu-close"><i class="icon-close"></i></span>
以下が中身のソース
となっています。

.mobile-menu-container{
	position:fixed;
	left:-280px;
	top:0;
	bottom:0;
	z-index:99;
	background-color:#333;
	width:100%;
	max-width:280px;
	overflow-y:scroll;
	box-shadow:0.1rem 0 0.6rem 0 rgba(51,51,51,0.5);
	will-change:transform;
	visibility:hidden;
	font-size:1.2rem;line-height:1.5;transition:all 0.4s ease
}
.mmenu-active .mobile-menu-container{
	visibility:visible;
	transform:translateX(280px)
}
.mobile-menu-container .social-icons{
	justify-content:center;
	margin-bottom:0
}
.mobile-menu-container .social-icon{
	width:3rem;
	height:3rem;
	font-size:1.2rem;
	background-color:transparent;
	margin-bottom:0;
	color:rgba(255,255,255,0.45);
	border-color:rgba(255,255,255,0.45)
}
.mobile-menu-container .social-icon+.social-icon{
	margin-left:.8rem
}
.mobile-menu-container .social-icon:hover,
.mobile-menu-container .social-icon:focus{
	background-color:transparent
}.mobile-menu-wrapper{
	position:relative;
	padding:4.2rem 0
}
.mobile-menu-close{
	display:flex;align-items:center;
	justify-content:center;width:3rem;
	height:3rem;
	position:absolute;top:.7rem;right:1rem;padding:0;
	z-index:9;
	cursor:pointer;
	font-size:1.6rem;
	line-height:1;
	color:#fff;transition:color .35s}.mobile-menu-close:hover,.mobile-menu-close:focus{color:#c96}
.mobile-menu-overlay{
	display:block;
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	right:0;
	background-color:rgba(25,25,25,0.25);
	z-index:1000;transition:all 0.4s;
	visibility:hidden;opacity:0
}
.mmenu-active .mobile-menu-overlay{
	visibility:visible;opacity:1
}
.mobile-nav{
	padding:0;
	margin:0 0 2.5rem
}

ドロワーがiframeの中で展開されているため、スマホの上下画面に広がりません。

理想的な展開

どちらも、iframeを使用してあります。
現状、ドロワーはiframeを使わなければ、上下の最大幅まで展開されます。