1. Web
  2. CSS
  3. Reference
  4. Properties
  5. column-height

column-height

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Thuộc tính column-height CSS chỉ định chiều cao của các cột trong bố cục nhiều cột CSS.

Thuộc tính viết tắt columns có thể được sử dụng để đặt các giá trị thuộc tính column-height, column-count và column-width trong một khai báo duy nhất.

Cú pháp

css
/* Từ khóa */
column-height: auto;

/* Giá trị <length> */
column-height: 300px;
column-height: 25em;
column-height: 70vh;

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

Giá trị

auto

Giá trị khởi tạo. Nếu container nội dung có chiều cao được đặt, các cột nội dung sẽ phát triển đến chiều cao đó, tràn ra bên cạnh nếu nội dung không vừa trong container. Nếu container nội dung không có chiều cao được đặt, nội dung sẽ được phân phối đều giữa các cột được tạo bên trong container.

<length>

Chiều cao của các cột. Phải không âm.

Mô tả

Thuộc tính column-height đặt chiều cao của các cột trong bố cục nhiều cột. Điều này hữu ích để giới hạn chiều cao cột nhằm tăng khả năng đọc khi đặt nhiều cột bằng cách sử dụng thuộc tính column-count hoặc column-width.

Không có column-height, nếu chiều cao của nội dung nhiều cột vượt quá chiều cao viewport, người đọc sẽ cần cuộn xuống đến cuối cột và sau đó cuộn ngược lên đầu cột tiếp theo. Một cách khắc phục có thể là đặt chiều cao cố định cho container nội dung, tuy nhiên, các cột dư thừa sau đó sẽ tràn ra bên cạnh và người đọc sẽ phải cuộn theo hướng nội tuyến để đọc toàn bộ nội dung.

Thuộc tính column-height, cùng với column-wrap, cho phép bạn đặt chiều cao cụ thể cho các cột và bọc chúng sang hàng cột mới khi đến cạnh container.

Giá trị mặc định của column-wrap là auto, được giải quyết thành wrap khi column-height được đặt thành giá trị <length>; wrap cho phép các cột có chiều cao cố định bọc sang nhiều hàng. Khi column-height bằng auto, column-wrap: auto được giải quyết thành nowrap, cho phép các cột tràn ngang nếu chiều cao container cố định được đặt. Do hành vi mặc định này, thông thường bạn không cần đặt thuộc tính column-wrap một cách rõ ràng.

Định nghĩa chính thức

Initial valueauto
Applies toBlock containers except table wrapper boxes
Inheritedno
Computed valueauto if specified as auto, otherwise for <length> the absolute value specified
Animation typeby computed value type

Cú pháp chính thức

column-height = 
  auto            |
  <length [0,∞]>

Ví dụ

Sử dụng cơ bản

Ví dụ này minh họa cách sử dụng cơ bản của thuộc tính column-height để tạo bố cục nhiều cột được bọc.

HTML

Chúng ta bao gồm một bài thơ của Dr. Seuss sử dụng <ol> chứa 28 <li>, tiếp theo là tên tác giả trong <p>.

html
<ol>
  <li>One fish</li>
  <li>Two fish</li>
  <li>Red fish</li>
  <li>Blue fish</li>
  ...
</ol>
<p>-- Dr. Seuss</p>

CSS

Chúng ta định nghĩa <ol> là một container nhiều cột bằng cách đặt thuộc tính column-width thành 150px, nghĩa là container sẽ chứa càng nhiều cột càng tốt với mỗi cột có chiều rộng ít nhất là 150px. Thuộc tính gap là 2em tạo khoảng cách ngang giữa các cột và khoảng cách dọc giữa các hàng cột. Sau đó chúng ta đặt column-height thành 2em, khiến giá trị mặc định auto của thuộc tính column-wrap được giải quyết thành wrap để tạo các hàng cột được bọc.

css
ol {
  column-width: 150px;
  gap: 2em;
  column-height: 3em;
}

Kết quả

Các cột cuộn snap

Ví dụ này kết hợp bố cục nhiều cột được bọc với CSS scroll snapping, tạo trải nghiệm có thể sử dụng trong đó mỗi hành động cuộn snap một hàng cột mới gọn gàng bên trong toàn bộ chiều cao của viewport để đọc thoải mái.

HTML

HTML, chứa nhiều đoạn văn nội dung từ các trang chủ MDN HTML, CSS và JavaScript, đã được ẩn đi cho ngắn gọn.

CSS

Chúng ta bắt đầu bằng cách đặt column-width trên phần tử <body> để xác định chiều rộng ưa thích cho các cột. gap là 3em 2em tạo khoảng cách 3em giữa các hàng và 2em giữa các cột. column-rule thêm một đường kẻ ở giữa khoảng cách giữa các cột. column-height là 95vh làm cho các cột gần bằng chiều cao của viewport.

Chúng ta đặt rõ ràng column-wrap thành wrap như một lời nhắc về hành vi bọc được áp dụng. Chúng ta có thể đặt giá trị thành auto hoặc bỏ qua thuộc tính hoàn toàn, vì theo mặc định, column-wrap được giải quyết thành wrap khi column-height được đặt thành giá trị <length>.

css
body {
  column-width: 150px;
  column-rule: 2px solid red;
  gap: 3em 2em;
  padding: 0 2em;
  column-height: 95vh;
  column-wrap: wrap;
}

Tiếp theo, chúng ta đặt thuộc tính column-span của phần tử <h1> thành all, để tiêu đề trải dài trên tất cả các cột, và đặt thuộc tính margin-top của <p> đầu tiên thành 0 để nó thẳng hàng với đầu các cột.

css
h1 {
  column-span: all;
}

p:first-of-type {
  margin-top: 0;
}

Cuối cùng, chúng ta thêm scroll snapping bằng cách đặt scroll-snap-type thành y mandatory trên phần tử <html>, và scroll-snap-align thành start trên các phần tử giả ::column đại diện cho mỗi cột được tạo. Điều này khiến nội dung snap đến đầu cột mới mỗi khi cuộn.

css
html {
  scroll-snap-type: y mandatory;
}

::column {
  scroll-snap-align: start;
}

Kết quả

Thử cuộn nội dung. Lưu ý cách mỗi hàng cột mới lấp đầy viewport và cách nội dung snap gọn gàng đến đầu hàng mới với mỗi lần cuộn.

Sân chơi column-height và column-count

Ví dụ này xây dựng dựa trên ví dụ trước bằng cách bao gồm hai thanh trượt phạm vi cho phép bạn điều chỉnh số lượng cột và chiều cao cột của bố cục nhiều cột.

HTML và JavaScript

HTML giống như ví dụ trước, với việc thêm một biểu mẫu chứa hai phần tử <input="range"> cập nhật các giá trị column-count và column-height thông qua JavaScript. HTML và JavaScript đã được ẩn đi cho ngắn gọn.

CSS

Chúng ta chỉ định column-rule và gap với các giá trị giống như ví dụ trước. Chúng ta không chỉ định column-width; thay vào đó, chúng ta tạo bố cục nhiều cột bằng cách sử dụng thuộc tính column-count, tương tác đặt số lượng cột và chiều cao hàng cột bằng JavaScript. Scroll snapping không được bao gồm trong ví dụ này.

css
body {
  column-count: 3;
  column-height: 20em;
  column-rule: 2px solid red;
  gap: 3em 2em;
  padding: 0 2em;
}

Kết quả

Điều chỉnh số lượng cột và chiều cao cột để xem tác động của các thuộc tính này.

Thông số kỹ thuật

Specification
CSS Multi-column Layout Module Level 2
# propdef-column-height

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

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

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