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

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

これはフレームセットを使用して行われました。ワイド スクリーンでの開発では問題は見つかりませんでしたが、ユーザーが 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 の遅いクエリの落とし穴

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

ブログ    

推薦する

mysql はフィールドコンテンツの一部を置き換え、mysql は関数 replace() を置き換えます。

[mysql] replace の使用方法 (フィールドの内容の一部を置き換える) [mysql]...

MySQL 5.7.33 インストール プロセスの詳細な図解

目次インストールパッケージのダウンロードインストール環境変数の設定インストールが成功したか確認する記...

Vueでパスワードの表示と非表示機能を実装するアイデアを詳しく解説

効果: アイデア:入力タイプ属性を使用して、タイプ値がテキストの場合はパスワードを表示し、タイプ値が...

Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL 環境構築チュートリアル

準備1. 環境の説明:オペレーティング システム: Windows Server 2019 PHP ...

CSSアニメーション属性キーフレームの詳細な説明

コラムを更新してからどれくらい経ったでしょうか?半年ですか?今年の後半は、まさに離陸、つまり文字通り...

SQL Server の完全バックアップに関する珍しいエラーと解決策

1. エラーの詳細一度、データベース全体のバックアップを手動で実行したときに、次のエラーが発生しまし...

MySql のサブクエリ内のクエリ例の詳細な説明

北西を見ると私の故郷はどこにあるでしょうか。南東の満月を何度見たことがあるでしょうか。月が再びゆっく...

IE ラベル LI テキスト折り返し問題について

私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...

Win10 での MySQL 5.7 の詳細なインストールと設定のチュートリアル

1. MySQL 5.7を解凍する2. 新しい設定ファイルmy.iniを作成し、 D:\Free\m...

MySQL 8.0.13 で日付を 0000-00-00 00:00:00 に設定すると発生する問題を解決する

データベース操作を学び始めたばかりです。今日、データを保存していたところ、エラーが発生していることに...

画像のシームレスなスクロールを実現する JavaScript タイマー

この記事では、画像のシームレスなスクロールを実現するためのJavaScriptの具体的なコードを参考...

Nginx の構成と HTTP 実装コード分析との互換性

OpenSSL を使用して SSL キーと CSR ファイルを生成するHTTPS を設定するには、秘...

Dockerプライベートウェアハウスの構築とインターフェース管理の詳細な説明

1. レジストリについて公式 Docker ハブは、パブリックイメージを管理するのに適した場所です。...

ツールベースのウェブサイトの考察: ツールベースのウェブサイトの定義と典型的なケース分析 (写真とテキスト)

ツール型ウェブサイトについて、まず疑問に思うのは、無数のオンラインウェブサイトの中で、どのようなウェ...

JSでES6クラスの使い方をすぐにマスター

1. どのように構築しますか? es5 でクラスを構築する一般的な方法を確認しましょう。まず、es5...