コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > divを画面全体に表示させる方法(CSS)

divを画面全体に表示させる方法(CSS)

不言
リリース： 2018-05-09 11:41:08
オリジナル
4837 人が閲覧しました

この記事では、div を画面全体に表示する方法 (CSS) を主に紹介します。これには、必要な友達がそれを参照できるように共有します。このようにして、p が画面全体に表示されます。

1. pの位置を設定します。

復習——

cssの位置には5つの属性があります:

静的: デフォルト値、位置決めなし

絶対: 絶対的な位置決め、親要素に対して相対的に配置されます

相対: 相対配置

fix: 固定配置、ブラウザウィンドウを基準に配置

継承: 親要素から配置情報を継承

デフォルト値の static と継承に加えて、次のことができます。他の 3 つを追加してウィンドウ適応を実装します。

コードは次のとおりです: 

 1 <style> 
 2         *{ 
 3             margin: 0; 
 4             padding: 0; 
 5         } 
 6         div{ 
 7             width:100%; 
 8             height: 100%; 
 9             background: yellow;
 10             position: absolute;
 11         }
 12 
 13 </style>
 14 
 15 
 16 <body>
 17 
 18 <div></div>
 19 
 20 </body>
ログイン後にコピー

2. htmlとbodyの幅と高さを設定して、pを画面いっぱいに表示します

 1 <style> 
 2         *{ 
 3             margin: 0; 
 4             padding: 0; 
 5         } 
 6         html,body{ 
 7             width: 100%; 
 8             height: 100%; 
 9         }
 10         div{
 11             width:100%;
 12             height: 100%;
 13             background: yellow;
 14         }
 15 </style>
 16 
 17 <body>
 18 <div></div>
 19 </body>
ログイン後にコピー

以上がこの記事の全内容です。 PHP中国語ウェブサイトへ。

以上がdivを画面全体に表示させる方法(CSS)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css 方法
ソース：php.cn
前の記事：CSS を使用して複数の境界線を実装する 5 つの方法 次の記事：CSS は、テキスト上にマウスを置くことでテキストの内容を変更することを実装します。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
9
1588
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
から 2024-04-06 21:28:37
0
1
2257
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート