CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用してウィンドウの高さの100％のDIVを作成する方法

CSSのheightプロパティは、要素の高さを指定するのに役立ちます。

構文

CSSのheightプロパティの構文は次のとおりです-

Selector {
   height: /*value*/
}

例

次の例は、CSSの高さプロパティを示しています。

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <style>
         html, body {
            margin: 0px;
            height: 100vh;
         }
         div {
            height: 100%;
            text-align: center;
            background: mistyrose;
         }
      </style>
   </head>
   <body>
      <div>100% height!!</div>
   </body>
</html>

例

これにより、次の出力が得られます

CSSを使用してウィンドウの高さの100％のDIVを作成する方法 

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <style>
         html, body {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            margin: 0px;
            height: 100vh;
            box-shadow: inset 0 0 40px lightblue;
         }
         div {
            width: 40%;
            height: 100vh;
            text-align: center;
            box-shadow: inset 0 0 20px lightcoral;
         }
      </style>
   </head>
   <body>
      <div>Watch This!</div>
      <div>Let Me Show You How The Boss Does It!!</div>
      <div>Open Up The Sky!!</div>
      <div>GO! GO! GO!!</div>
   </body>
</html>

これにより、次の出力が得られます

CSSを使用してウィンドウの高さの100％のDIVを作成する方法


  1. CSSを使用してブラウザウィンドウの高さ全体に合うように要素を拡大するにはどうすればよいですか？

    CSSを使用してブラウザウィンドウの高さ全体に合わせて要素を拡大するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <title>Page Title</title> <style>    *{       box-sizing: border-box;    }    html, body {       height: 100%;   &nbs

  2. CSSクリップパスを使用して三角形を作成する方法

    CSSのclip-pathプロパティを使用して三角形を作成できます。 構文 CSSclip-pathプロパティの構文は次のとおりです- Selector {    clip-path: /*value*/ } 例 次の例は、CSSのclip-pathプロパティを示しています。 <!DOCTYPE html> <html>    <head>       <style>          div {