フレームセットの高さを設定する際のインターフェース変形の解決策

フレームセットの高さを設定する際のインターフェース変形の解決策
現在、プロジェクトを作成しました。インターフェースは次のとおりです。

これはフレームセットを使用して行われました。ワイド スクリーンでの開発では問題は見つかりませんでしたが、ユーザーが 800 x 600 のマシンでテストしたところ、インターフェイス全体が変形していることがわかりました。
当時は、フレームセット ページ全体の高さが 600 ピクセルしかなく、フレームセット内にネストされたフレームにスクロール バーが表示され、非常に見苦しいものでした。ネストされたフレーム ページにスクロール バーがなく、フレームセットにスクロール バーが表示されるように、フレームセットの高さを高く設定するにはどうすればよいですか?

フレームセットの高さは設定できません。例: <frameset rows="110,*" style="height: 1900px;">。この時点では、ページの高さは 1900px ではなく、画面の高さのままです。フレームセットの本体の高さを設定することも無効です。どうすればいいですか?何日もBaiduで検索しましたが、答えが見つからなかったため、この質問は未回答のままになっています。フレームセットをDIV+CSSに置き換えてもらうことも考えましたが、内容が多すぎて作業量が多すぎるのではないかと心配だったので断念しました。

インスピレーションというのは不思議なものです。インスピレーションは来るかもしれないし来ないかもしれないが、一度来たら止めることはできないのです。この問題が1か月ほど放置されていたところ、今日突然発生し、iframe が付属してきました。その中にフレームセットをネストし、iframe ページの高さを設定すると、効果が本当に現れました。同じ問題に遭遇したが解決できない同僚と解決策を共有したいと思います。

1. フレームセットページ (inner.html)

コードをコピー
コードは次のとおりです。

<html>
<フレームセット行="110,*" フレームボーダー="いいえ" ボーダー="0" フレーム間隔="-4px">
<frame src="header.jsp" name="topFrame" scrolling="no" noresize="noresize" />
<frameset cols="170,12,*" framespacing="0" frameborder="no" border="0" id="mainFrameset">
<frame src="left.jsp" name="leftFrame"scrolling="auto" noresize="noresize" id="leftFrame"/>
<frame src="narrow.jsp" scrolling="no" noresize="noresize"/>
<frame src="" name="mainFrame" noresize="noresize" />
</フレームセット>
</フレームセット>
<フレームなし>
</フレームなし>
</html>


2. iframe ページ (outer.html)
重要なのは、このページの高さを設定することです。好きなだけ高く設定できます。このとき、中に含まれるフレームセットもこの高さになります。

コードをコピー
コードは次のとおりです。

<body style="margin: 0px;height: 580px;width:960px;">
<iframe src="inner.html"
スタイル="高さ:100%;幅:100%;境界線の幅: 0px;">
</iframe>
</本文>

<<:  MySQL の遅いクエリの落とし穴

>>:  ウェブデザインとは何か

推薦する

Vue Elementのテーブルコンポーネントをカプセル化する方法

Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...

MySQLのexecute、executeUpdate、executeQueryの違い

execute、executeUpdate、executeQuery の違い (およびそれらの戻り値...

Docker の MySQL 時間とシステム時間の不一致の問題を解決する

最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...

複数の値を返す MySQL ストアド プロシージャ メソッドの例

この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...

HTML の blockquote タグの使用と美化

ブロック引用の定義と使用法<blockquote> タグは引用ブロックを定義します。 &...

iframeフレームはIEブラウザで白い背景を透明に設定します

最近、プロジェクトを進める過程で、ページの階層構造を描画するために iframe を頻繁に使用する必...

JavaScript を使用した数独の完全な実装プロセス

目次序文数独の解き方最初のボックスに記入してください2番目のボックスに記入してください3番目のボック...

WeChatアプレットにおけるデータ保存実装方法

目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...

Linuxでディスク使用量を確認する方法

1. dfコマンドを使用してディスク全体の使用量を表示します。 df コマンドは、ハードディスクのマ...

Linuxでプロセスが占有するポート番号を表示する

Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...

CSS グリッドレイアウトで列にアイテムを埋め込む方法

n 個のアイテムがあり、これらのアイテムをグリッド レイアウトの列に並べ替える必要があるとします。列...

MySQL 学習チュートリアル クラスター化インデックス

クラスタリングは、実際には InnoDB データベース エンジンに関連しています。したがって、インデ...

CCS におけるマージン: トップ崩壊問題を解決する

HTML 構造は次のとおりです。 CCS 構造は次のとおりです。 ページ効果図は次のとおりです。 こ...

Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか

目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...

CSS3 で transform を使用した場合のフォントぼかしの解決方法の詳細な説明

この質問は非常に奇妙なので、あまり多くを語らずにコードに直接進みます。 .g-ダイアログラッパー{ ...