フレームセットの高さを設定する際のインターフェース変形の解決策
現在、プロジェクトを作成しました。インターフェースは次のとおりです。 これはフレームセットを使用して行われました。ワイド スクリーンでの開発では問題は見つかりませんでしたが、ユーザーが 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> </本文> |
推薦する
クリーンなコードのための Web デザインの 12 の法則 [グラフィック]
美しいコードは美しい Web サイトの基礎です。優れた CSS は、同様に優れた HTML の上にの...
Linux bash: ./xxx: バイナリ ファイルを実行できません エラー
今日、Ubuntu 用の小さなツールを顧客に送りましたが、ユーザーはそれを受け取った後、実行できませ...
MySQL 5.7 でパスワードを変更するときに発生する ERROR 1054 (42S22) の解決方法
MySQL 5.7 を新しくインストールしました。ログインすると、パスワードが間違っているというメッ...
異なる列を持つテーブルのクエリ結果のSQLマージ操作
2 つの異なるテーブルをクエリするには、結果をマージする必要があります。たとえば、table1 の列...
WeChatアプレットがシンプルな計算機機能を実装
WeChatアプレット：シンプルな計算機、参考までに、具体的な内容は次のとおりです。ミニプログラムに...
CSS でのシングル div 描画テクニックの実装
純粋な HTML + CSS を使ってドラえもんの絵を描くなど、CSS 描画に関する記事をよく見かけ...
一般的な HTTP ステータス コード 10 個の詳細な説明
HTTP ステータス コードは、Web サーバーの HTTP 応答ステータスを示すために使用される ...
Blazor における CSS 分離の問題
1. 環境VS 2019 16.9.0 プレビュー 1.0 .NET SDK 5.0.100 2. ...
win10でのmysql5.7.21解凍バージョンのインストールチュートリアル
次のように、Win10でMysqlの解凍バージョンをインストールします。環境: win10 64ビッ...
editplus の Zen コーディング例コードの説明
たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...
HTMLメタの大きな役割
メタ属性には、name と http-equiv の 2 つがあります。 name 属性は主に、We...
静的ウェブサイトをRSSに変換するツール
<br /> この記事は allwebdesignresources.com から Ra...
要素の高さを下から上へ、上から下へ制御する CSS メソッド
よくある質問から議論を始めましょう。CSS を使用して要素の高さを [ブラウザ コンテンツ ウィンド...
幅と高さが可変の要素を中央に配置するための CSS ソリューション
1. 水平中央公開コード: html: <div class="parent&quo...
MySQL information_schema データベースの詳細な説明
1. 概要information_schema データベースは performance_schema...