HTML 左、中央、右の適応レイアウト (calc css 式を使用)
|
最新の HTML 標準には、レイアウトを計算するために使用できる calc CSS 式があります。 しかし、古い IE ではサポートされていません。すべてのブラウザをサポートするために、ここでは js を使用します。 スクリーンショット:  コード： コードをコピー コードは次のとおりです。<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN"> <html> <ヘッド> <title>MyHtml.html</title> <meta http-equiv="キーワード" content="キーワード1,キーワード2,キーワード3"> <meta http-equiv="description" content="これは私のページです"> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8"> <スクリプト> var 左、中央、右、幅; window.onload = 関数(){ 左=$('左'); 中心=$('中心'); 右=$('右'); サイズを変更する(); }; window.onresize = 関数() { 試す { 幅 = document.body.clientWidth; center.style.width = (幅 - 左のクライアント幅 - 右のクライアント幅 - 0) + "px"; }キャッチ(e){ //0未満の場合、エラーが報告されます } }; 関数 $(id){ document.getElementById(id) を返します。 } </スクリプト> <スタイル> 本文、html{ 高さ:100%; マージン:0px; パディング:0px; オーバーフロー:非表示; } #左、#中央、#右 幅:200px; 高さ:100px; 背景色:rgb(34,124,134); フロート:左; 高さ:100%; } ＃中心{ 背景色:赤; } </スタイル> </head> <本文> <div id="left"></div> <div id="center"></div> <div id="right"></div> </本文> </html> |
>>: MySQL実践ウィンドウ関数SQL分析クラスの生徒のテストの成績と生活費
推薦する
MySQL8のパスワードを忘れた場合の簡単な解決策
序文MySQL データベースのパスワードを忘れると、データベースに正常にアクセスできなくなり、パスワ...
ウェブサイトデザインに関するヒント
実は、最近はウェブデザインについてよく耳にするようになりました。インターネット業界は今とても発展して...
ポップアップ効果を実現するにはjsを使用します
この記事の例では、ポップアップ効果を実現するためのjsの具体的なコードを参考までに共有しています。具...
Zabbix の psk 暗号化と zabbix_get 値の組み合わせ
Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbix...
MySQL 8.0.23 のレプリケーション アーキテクチャにおけるスレーブ ノードの自動フェイルオーバー
私はしばらく MGR と連絡を取り合ってきました。MySQL 8.0.23 の登場により、MySQL...
Mysql の使用法の概要
導入EXISTS は、サブクエリが少なくとも 1 行のデータを返すかどうかを確認するために使用されま...
VMware での Ubuntu Docker のインストール (コンテナ構築)
1. マインドマップ 2. コンテナの構築方法2.1 実験環境の準備（１）環境選択管理ツール: D...
MySQL インデックスのカーディナリティの概念と使用例
この記事では、例を使用して、MySQL インデックス カーディナリティの概念と使用方法を説明します。...
Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)
1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...
Nginx + consul + upsync を使用して動的負荷分散を実現する方法の詳細な説明
目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...
Hadoop 2.x と 3.x の 22 ポイントの比較、Hadoop 3.x の 2.x に対する改善点
質問ガイド1. Hadoop 3.x はどのようにして障害を許容するのでしょうか? 2. Hadoo...
MySQL の WriteSet 並列レプリケーションの簡単な分析
【歴史的背景】私は 3 年間 MySQL-DBA として働いてきましたが、MySQL が「基本的に利...
JSのアンカーリンクをクリックするとスムーズにスクロールし、自由にトップ位置に調整できます。
アンカーリンクをクリックするとスムーズにスクロールし、自由にトップ位置に調整できます。 1. アンカ...
MySQL MGR の利点は何ですか?
MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...
jQueryはフォーム検証機能を実装します
jQuery フォーム検証の例 / ユーザー名、パスワード、住所、電子メールの検証を含む下記の通り ...