ページ上の要素のオーバーフロー部分までスクロールできません
<p>ページのサイズを変更すると、要素がビューポートの上にオーバーフローしてしまい、上にスクロールして表示できなくなります。解決策のある質問を見つけましたが、うまくいきませんでした。 2 つの「コア」非表示 div と、すべてのコンテンツを含む 1 つの div 要素があります。 </p>
<p>「container」div が存在するのは、この問題を解決しようとしているためです。 </p>
<p>
<pre class="brush:css;toolbar:false;">.container {
位置: 固定;
トップ: 0;
左: 0;
幅: 100%;
高さ: 100%;
Z インデックス: 500;
}
。メインコンテンツ {
ディスプレイ: フレックス;
幅: 100%;
高さ: 100%;
オーバーフロー: 自動;
マージン: 自動;
}
。窓 {
/*高さ: 16vw;
幅: 27vw;*/
ディスプレイ: フレックス;
高さ: 550ピクセル;
幅: 800ピクセル;
位置: 絶対;
トップ: 50%;
左: 50%。
境界線: 青の実線 5 ピクセル;
背景色: 黒;
マージン: 自動;
オーバーフロー: 非表示;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<div class="メインコンテンツ">
<div class="window" id="window1" style="transform: translation(-10%, -90%);">
<div class="header" id="window-header">
<img src="https://picsum.photos/800/550">
<p class="title">ナビゲーション</p>
</div>
</div>
</div>
</div></pre>
</p>
