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

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

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

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

推薦する

Linux でコマンドまたはプロセスの実行時間を調べる方法

Unix ライクなシステムでは、コマンドまたはプロセスの実行がいつ開始されたか、またプロセスがどのく...

vueプロジェクトは特定の領域に透かしを描くことを実現する

この記事では、Vueを使用して特定の領域に透かしを描く方法を紹介します。具体的な内容は次のとおりです...

MySQL のマスター スレーブ レプリケーション オプションをオンラインで変更する方法

序文: MySQL で最も一般的に使用されるアーキテクチャは、マスター スレーブ レプリケーションで...

Docker で Redis クラスターを素早く構築する方法の例

Redis クラスターとはRedis クラスターは、R​​edis が提供する分散データベース ソリ...

MySQL テーブルの垂直分割と水平分割

垂直分割垂直分割とは、データテーブルの列を分割すること、つまり、多くの列を持つテーブルを複数のテーブ...

スネークゲームを作るための Pygame コード

目次使用されるPygame関数スクリーンの作成ヘビの作成ヘビを動かすゲームオーバーの処理食事を増やす...

Vue3は現在のルーティングアドレスを取得します

正解useRouterの使用: // ルーターパス: "/user/:uid" ...

Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法

Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...

インデックスを使用して MySQL ORDER BY ステートメントを最適化する方法

テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...

MongoDB データベースの状態を監視する Zabbix3.4 メソッド

Mongodb には db.serverStatus() コマンドがあり、これを使用して Mongo...

MySQLは変数を使用してさまざまなソートを実装します

コアコード -- 以下では、MySQLでのソート列の実装を示します -- テストデータ CREATE...

JavaScript デザインパターン コマンドパターン

コマンド パターンは、JavaScript デザイン パターンにおける動作デザイン パターンです。定...

MySQL に配列を保存するサンプルコードと方法

多くの場合、ストアド プロシージャを作成するときに配列がよく使用されますが、MySQL ではストアド...

Alibaba Cloud ECS クラウド サーバー (Linux システム) は、MySQL をインストールした後にリモートで接続できません (落とし穴)

昨日、1年間使用していた Alibaba Cloud サーバーを購入しました。システムは Linux...