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分析クラスの生徒のテストの成績と生活費
推薦する
Tudou.comのホームページのデザイン方法
<br />私は数年間フロントエンドに取り組んできました。フロントエンドについて完全に理...
MySQL alter ignore構文の詳細な説明
今日仕事中に、ビジネス側から次のような質問をされました。テーブルがあり、一意のフィールドを追加する必...
MySQLのタイムゾーンを表示および設定する方法
1. データベースのタイムゾーンを確認する '%time_zone' のような変数を...
Docker コンテナのネットワーク設定によく使われるコマンドの詳しい説明
基本的なネットワーク構成Docker はイメージに基づいて複数のコンテナを「開く」ことができ、各コン...
CSS--overflow:hidden のプロジェクト例
以下は、私のプロジェクトでこのプロパティを使用する方法の例です。 （１）激しく透明な浮遊コードをコピ...
Vue2.0でデータの双方向バインディング機能をjsを使って実装する
Object.definePropertyの理解文法：オブジェクト.defineProperty(o...
MySQL8 でパスワードを忘れた後にパスワードをリセットする方法 (MySQL の古い方法は機能しません)
コマンドライン mysqld –skip-grant-tables は mysql8 では正常に起動...
Ubuntu 18.04で国内ソースを変更する方法の例
Ubuntu はソースが中国からなのでダウンロード速度が比較的遅いです。CentOS と異なり、yu...
MYSQL開発パフォーマンス調査：バッチデータ挿入の最適化方法
1. どのような問題に直面しましたか?標準 SQL では、通常、次の SQL 挿入ステートメントを記...
MySQL シリーズ 8 MySQL サーバー変数
チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...
テーブルタグ（テーブル）詳細
<br />テーブルは、昔から誰もが使ってきたタグで、今も使われています。しかし、現在の...
Linux システムに Zookeeper サービスをインストールする方法
1. /usr/local/services/zookeeper フォルダを作成します。 mkdir...
MySQL統計データテーブルの設計方法
目次リアルタイム更新は必要ですか?マテリアライズド ビュー ツール (Flexviews)カウントテ...
Linux システムで .sh ファイルを実行する方法
Linux システムで .sh ファイルを実行する方法は 2 つあります。たとえば、ルート ディレク...
Vueはテーマ切り替えのための複数のアイデアを実装します
目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...