height

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thuộc tính CSS height chỉ định chiều cao của một phần tử. Mặc định, thuộc tính xác định chiều cao của vùng nội dung. Tuy nhiên, nếu box-sizing được đặt thành border-box, nó sẽ xác định chiều cao của vùng viền.

Try it

height: 150px;

height: 6em;

height: 75%;

height: auto;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the height.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: white;
}

Các thuộc tính min-height và max-height ghi đè height.

Note: Là thuộc tính hình học, height cũng áp dụng cho các phần tử SVG <svg>, <rect>, <image>, và <foreignObject>, với auto được giải quyết thành 0 và giá trị phần trăm tương đối so với chiều cao viewport SVG đối với <rect>. Giá trị thuộc tính CSS height ghi đè bất kỳ giá trị thuộc tính SVG height nào được đặt trên phần tử SVG.

Cú pháp

css

/* Giá trị <length> */
height: 120px;
height: 10em;
height: 100vh;
height: anchor-size(height);
height: anchor-size(--my-anchor self-block, 250px);
height: clamp(200px, anchor-size(width));

/* Giá trị <percentage> */
height: 75%;

/* Giá trị từ khóa */
height: max-content;
height: min-content;
height: fit-content;
height: fit-content(20em);
height: auto;
height: stretch;

/* Giá trị toàn cục */
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;

Giá trị

<length>: Xác định chiều cao dưới dạng giá trị khoảng cách.
<percentage>: Xác định chiều cao dưới dạng phần trăm chiều cao của khối chứa.
auto: Trình duyệt sẽ tính toán và chọn chiều cao cho phần tử được chỉ định.
max-content: Chiều cao ưu tiên nội tại.
min-content: Chiều cao tối thiểu nội tại.
fit-content: Sử dụng không gian có sẵn, nhưng không vượt quá max-content, tức là min(max-content, max(min-content, stretch)).
fit-content(<length-percentage>): Sử dụng công thức fit-content với không gian có sẵn được thay thế bằng đối số được chỉ định, tức là min(max-content, max(min-content, <length-percentage>)).
stretch: Đặt chiều cao của hộp lề của phần tử bằng chiều cao của khối chứa. Nó cố gắng làm cho hộp lề lấp đầy không gian có sẵn trong khối chứa, vì vậy theo một cách nào đó hoạt động tương tự như 100% nhưng áp dụng kích thước kết quả cho hộp lề thay vì hộp được xác định bởi box-sizing.

Khả năng truy cập

Đảm bảo rằng các phần tử được đặt height không bị cắt bớt và/hoặc không che khuất nội dung khác khi trang được phóng to để tăng kích thước văn bản.

Định nghĩa hình thức

Initial value	`auto`
Applies to	all elements but non-replaced inline elements, table columns, and column groups
Inherited	no
Percentages	The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to `auto`. A percentage height on the root element is relative to the initial containing block.
Computed value	a percentage or `auto` or the absolute length
Animation type	a length, percentage or calc();

Cú pháp hình thức

height = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <size-keyword>  |
  <calc-size()>   |
  any             |
  <calc-sum>      

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Ví dụ

Đặt chiều cao bằng pixel và phần trăm

HTML

html

<div id="taller">I'm 50 pixels tall.</div>
<div id="shorter">I'm 25 pixels tall.</div>
<div id="parent">
  <div id="child">I'm half the height of my parent.</div>
</div>

CSS

css

div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}

Kết quả

Kéo dãn chiều cao để lấp đầy khối chứa

HTML

html

<div class="parent">
  <div class="child">text</div>
</div>

<div class="parent">
  <div class="child stretch">stretch</div>
</div>

CSS

@supports not (height: stretch) {
  .parent {
    display: none !important;
  }

  body::after {
    content: "Your browser doesn't support the `stretch` value yet.";
  }
}

css

.parent {
  height: 150px;
  margin: 1rem;
  border: solid;
}

.child {
  margin: 1rem;
  background: #00999999;
}

.stretch {
  height: stretch;
}

Kết quả

Đặc tả

Specification
CSS Box Sizing Module Level 3 # preferred-size-properties
CSS Box Sizing Module Level 4 # sizing-values

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content