Computer >> Máy Tính >  >> Lập trình >> CSS

Cách tạo DIV 100% Chiều cao cửa sổ bằng CSS

Thuộc tính chiều cao CSS giúp chúng tôi chỉ định chiều cao của một phần tử.

Cú pháp

Cú pháp của thuộc tính CSS height như sau -

Selector {
   height: /*value*/
}

Ví dụ

Các ví dụ sau minh họa thuộc tính chiều cao 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>

Ví dụ

Điều này cho kết quả sau

Cách tạo DIV 100% Chiều cao cửa sổ bằng CSS

<!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>

Điều này cho kết quả sau

Cách tạo DIV 100% Chiều cao cửa sổ bằng CSS