Свойство CSS `column-height`

Свойство column-height CSS задаёт высоту столбцов в многоколоночном макете CSS.

Синтаксис

/* Keyword */
column-height: auto;

/* <length> value */
column-height: 300px;
column-height: 25em;
column-height: 70vh;

/* Global values */
column-height: inherit;
column-height: initial;
column-height: revert;
column-height: revert-layer;
column-height: unset;

Значения

Для этого свойства указывается одно значение из следующего списка:

auto

Начальное значение. Если для контейнера содержимого задана высота, столбцы содержимого увеличиваются до этой высоты, а при нехватке места выходят за пределы контейнера сбоку. Если высота контейнера содержимого не задана, содержимое равномерно распределяется между столбцами, созданными внутри контейнера.

<length>

Высота столбцов. Значение должно быть неотрицательным.

Описание

Свойство column-height задаёт высоту столбцов в многоколоночном макете. Это полезно для ограничения высоты столбцов ради удобства чтения при создании нескольких столбцов с помощью свойства column-count или column-width.

Без column-height, если высота содержимого в нескольких столбцах превышает высоту области просмотра, читателям придётся прокрутить страницу до конца столбца, а затем вернуться вверх к началу следующего столбца. Одним из возможных решений было бы задать фиксированную высоту контейнера содержимого, однако лишние столбцы тогда будут выходить за его пределы сбоку, и читателям придётся прокручивать страницу в строчном направлении, чтобы прочитать всё содержимое.

Свойство column-height вместе со свойством column-wrap позволяет задать столбцам определённую высоту и переносить их на новую строку при достижении края контейнера.

По умолчанию значение column-wrap равно auto, которое становится wrap, если для column-height задано значение типа <length>; wrap позволяет переносить столбцы фиксированной высоты на несколько строк. Если column-height равно auto, column-wrap: auto становится nowrap, позволяя столбцам выходить за пределы контейнера по горизонтали, если для контейнера задана фиксированная высота. Благодаря такому поведению по умолчанию обычно нет необходимости явно задавать свойство column-wrap.

Свойство column-height, а также свойства column-count и column-width можно также задать с помощью сокращённого свойства columns.

Формальное определение

Формальный синтаксис

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

Примеры

Основное использование

В этом примере показано основное использование свойства column-height для создания многоколоночного макета с переносом строк.

HTML

Мы добавляем стихотворение доктора Сьюза в виде элемента <ol>, содержащего 28 элементов <li>, а затем указываем имя автора в элементе <p>.

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

<ol>
  <li>One fish</li>
  <li>Two fish</li>
  <li>Red fish</li>
  <li>Blue fish</li>
  <li>Black fish</li>
  <li>Blue fish</li>
  <li>Old fish</li>
  <li>New fish.</li>
  <li>This one has a little star.</li>
  <li>This one has a little car.</li>
  <li>Say! What a lot</li>
  <li>Of fish there are.</li>
  <li>Yes. Some are red. And some are blue.</li>
  <li>Some are old. And some are new.</li>
  <li>Some are sad.</li>
  <li>And some are glad.</li>
  <li>And some are very, very bad.</li>
  <li>Why are they</li>
  <li>Sad and glad and bad?</li>
  <li>I do not know.</li>
  <li>Go ask your dad.</li>
  <li>Some are thin.</li>
  <li>And some are fat.</li>
  <li>The fat one has</li>
  <li>A yellow hat.</li>
  <li>From there to here, from here to there,</li>
  <li>Funny things</li>
  <li>Are everywhere.</li>
</ol>
<p>--Dr. Seuss</p>

CSS

Мы задаём для <ol> роль многоколоночного контейнера, устанавливая свойство column-width в значение 150px. Это означает, что контейнер будет содержать максимально возможное число столбцов шириной не менее 150px каждый. Свойство gap со значением 2em задаёт горизонтальный промежуток между столбцами и вертикальный промежуток между строками столбцов. Затем мы задаём column-height значение 2em, благодаря чему значение auto по умолчанию для свойства column-wrap становится wrap, создавая переносимые строки столбцов.

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

Результат

Столбцы с привязкой прокрутки

В этом примере многоколоночный макет с переносом строк сочетается с привязкой прокрутки CSS. В результате при каждом прокручивании новая строка столбцов аккуратно размещается в пределах всей высоты области просмотра, обеспечивая удобство чтения.

HTML

Для краткости HTML-код с несколькими абзацами содержимого с домашних страниц MDN по HTML, CSS и JavaScript скрыт.

<h1>HTML, CSS, and JavaScript summaries</h1>
<p>
  <strong>HTML</strong> (HyperText Markup Language) is the most basic building
  block of the Web. It defines the meaning and structure of web content. Other
  technologies besides HTML are generally used to describe a web page's
  appearance (CSS) or behavior (JavaScript).
</p>
<p>
  "Hypertext" refers to text containing links that connect web pages to one
  another, either within a single website or between websites. Links are a
  fundamental aspect of the Web. By uploading content to the Internet and
  linking it to pages created by other people, you become an active participant
  in the World Wide Web.
</p>
<p>
  HTML uses "markup" to annotate text, images, and other content for display in
  a Web browser. HTML markup includes special "elements" such as
  <a href="/en-US/docs/Web/HTML/Reference/Elements/head"
    ><code>&lt;head&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/title"
    ><code>&lt;title&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/body"
    ><code>&lt;body&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/header"
    ><code>&lt;header&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/footer"
    ><code>&lt;footer&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/article"
    ><code>&lt;article&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/section"
    ><code>&lt;section&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/p"><code>&lt;p&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/div"
    ><code>&lt;div&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/span"
    ><code>&lt;span&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/img"
    ><code>&lt;img&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/aside"
    ><code>&lt;aside&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/audio"
    ><code>&lt;audio&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/canvas"
    ><code>&lt;canvas&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/datalist"
    ><code>&lt;datalist&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/details"
    ><code>&lt;details&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/embed"
    ><code>&lt;embed&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/nav"
    ><code>&lt;nav&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/search"
    ><code>&lt;search&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/output"
    ><code>&lt;output&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/progress"
    ><code>&lt;progress&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/video"
    ><code>&lt;video&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/ul"
    ><code>&lt;ul&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/ol"
    ><code>&lt;ol&gt;</code></a
  >,
  <a href="/en-US/docs/Web/HTML/Reference/Elements/li"
    ><code>&lt;li&gt;</code></a
  >
  and many others.
</p>
<p>
  An HTML element is set off from other text in a document by "tags", which
  consist of the element name surrounded by <code>&lt;</code> and
  <code>&gt;</code>. The name of an element inside a tag is case-insensitive.
  That is, it can be written in uppercase, lowercase, or a mixture. For example,
  the <code>&lt;title&gt;</code> tag can be written as
  <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, or in any other way.
  However, the convention and recommended practice is to write tags in
  lowercase.
</p>

<hr />

<p>
  <strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) is a
  <a href="/en-US/docs/Web/API/StyleSheet">stylesheet</a> language used to
  describe the presentation of a document written in
  <a href="/en-US/docs/Web/HTML">HTML</a> or
  <a href="/en-US/docs/Web/XML/Guides/XML_introduction">XML</a> (including XML
  dialects such as <a href="/en-US/docs/Web/SVG">SVG</a>,
  <a href="/en-US/docs/Web/MathML">MathML</a> or
  <a href="/en-US/docs/Glossary/XHTML">XHTML</a>). CSS describes how elements
  should be rendered on screen, on paper, in speech, or on other media.
</p>
<p>
  CSS is among the core languages of the <strong>open web</strong> and is
  standardized across web browsers according to
  <a href="https://www.w3.org/Style/CSS/#specs" class="external" target="_blank"
    >W3C specifications</a
  >. Previously, the development of various parts of CSS specification was done
  synchronously, which allowed the versioning of the latest recommendations. You
  might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3
  or a CSS4; rather, everything is now just "CSS" with individual CSS modules
  having version numbers.
</p>
<p>
  After CSS 2.1, the scope of the specification increased significantly and the
  progress on different CSS modules started to differ so much, that it became
  more effective to
  <a
    href="https://www.w3.org/Style/CSS/current-work"
    class="external"
    target="_blank"
    >develop and release recommendations separately per module</a
  >. Instead of versioning the CSS specification, W3C now periodically takes a
  snapshot of
  <a href="https://www.w3.org/TR/css/" class="external" target="_blank"
    >the latest stable state of the CSS specification</a
  >
  and individual modules progress. CSS modules now have version numbers, or
  levels, such as
  <a
    href="https://drafts.csswg.org/css-color-5/"
    class="external"
    target="_blank"
    >CSS Color Module Level 5</a
  >.
</p>

<hr />

<p>
  <strong>JavaScript</strong> (<strong>JS</strong>) is a lightweight interpreted
  (or
  <a href="/en-US/docs/Glossary/Just_In_Time_Compilation"
    >just-in-time compiled</a
  >) programming language with
  <a href="/en-US/docs/Glossary/First-class_Function">first-class functions</a>.
  While it is most well-known as the scripting language for Web pages,
  <a
    href="https://en.wikipedia.org/wiki/JavaScript#Other_usage"
    class="external"
    target="_blank"
    >many non-browser environments</a
  >
  also use it, such as <a href="/en-US/docs/Glossary/Node.js">Node.js</a>,
  <a href="https://couchdb.apache.org/" class="external" target="_blank"
    >Apache CouchDB</a
  >
  and
  <a
    href="https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/"
    class="external"
    target="_blank"
    >Adobe Acrobat</a
  >. JavaScript is a
  <a href="/en-US/docs/Glossary/Prototype-based_programming">prototype-based</a
  >, <a href="/en-US/docs/Glossary/Garbage_collection">garbage-collected</a>,
  <a href="/en-US/docs/Glossary/Dynamic_typing">dynamic</a> language, supporting
  multiple paradigms such as imperative, functional, and object-oriented.
</p>
<p>
  JavaScript's dynamic capabilities include runtime object construction,
  variable parameter lists, function variables, dynamic script creation (via
  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval"
    ><code>eval</code></a
  >), object introspection (via
  <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"
    ><code>for...in</code></a
  >
  and
  <a
    href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#static_methods"
    ><code>Object</code> utilities</a
  >), and source-code recovery (JavaScript functions store their source text and
  can be retrieved through
  <a
    href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"
    ><code>toString()</code></a
  >).
</p>
<p>
  This section is dedicated to the JavaScript language itself, and not the parts
  that are specific to Web pages or other host environments. For information
  about <a href="/en-US/docs/Glossary/API">APIs</a> that are specific to Web
  pages, please see <a href="/en-US/docs/Web/API">Web APIs</a> and
  <a href="/en-US/docs/Glossary/DOM">DOM</a>.
</p>
<p>
  The standards for JavaScript are the
  <a href="https://tc39.es/ecma262/" class="external" target="_blank"
    >ECMAScript Language Specification</a
  >
  (ECMA-262) and the
  <a href="https://tc39.es/ecma402/" class="external" target="_blank"
    >ECMAScript Internationalization API specification</a
  >
  (ECMA-402). As soon as one browser implements a feature, we try to document
  it. This means that cases where some
  <a href="https://github.com/tc39/proposals" class="external" target="_blank"
    >proposals for new ECMAScript features</a
  >
  have already been implemented in browsers, documentation and examples in MDN
  articles may use some of those new features. Most of the time, this happens
  between the
  <a href="https://tc39.es/process-document/" class="external" target="_blank"
    >stages</a
  >
  3 and 4, and is usually before the spec is officially published.
</p>
<p>
  Do not confuse JavaScript with the
  <a
    href="https://en.wikipedia.org/wiki/Java_(programming_language)"
    class="external"
    target="_blank"
    >Java programming language</a
  >
  — <strong>JavaScript is <em>not</em> "Interpreted Java"</strong>. Both "Java"
  and "JavaScript" are trademarks or registered trademarks of Oracle in the U.S.
  and other countries. However, the two programming languages have very
  different syntax, semantics, and use.
</p>
<p>
  JavaScript documentation of core language features (pure
  <a
    href="/en-US/docs/Web/JavaScript/Reference/JavaScript_technologies_overview"
    >ECMAScript</a
  >, for the most part) includes the following:
</p>

CSS

Сначала мы задаём свойство column-width для элемента <body>, чтобы определить предпочтительную ширину столбцов. Значение 3em 2em для свойства gap создаёт промежуток 3em между строками и 2em между столбцами. Свойство column-rule добавляет линию в центре промежутка между столбцами. Значение 95vh для свойства column-height делает столбцы почти такими же высокими, как область просмотра.

Мы явно задаём свойству column-wrap значение wrap, чтобы напомнить о применённом поведении переноса. Можно было бы задать значение auto или вовсе опустить это свойство, поскольку по умолчанию column-wrap становится wrap, если для column-height задано значение типа <length>.

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

Затем мы задаём свойству column-span элемента <h1> значение all, чтобы заголовок охватывал все столбцы, а свойству margin-top первого элемента <p> задаём значение 0, чтобы выровнять его по верхнему краю столбцов.

h1 {
  column-span: all;
}

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

Наконец, мы добавляем привязку прокрутки, задавая свойству scroll-snap-type элемента <html> значение y mandatory, а псевдоэлементам ::column, представляющим каждый созданный столбец, — значение start для свойства scroll-snap-align. Благодаря этому при прокрутке содержимое привязывается к началу нового столбца.

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

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

* {
  box-sizing: border-box;
}

html {
  font-family: "Arial", sans-serif;
}

p {
  line-height: 1.5;
}

@supports not (column-height: 15em) {
  body::before {
    content: "Your browser does not support the 'column-height' property.";
    background-color: wheat;
    position: fixed;
    inset: 40% 0;
    height: fit-content;
    text-align: center;
    padding: 1rem 0;
  }
}

Результат

Попробуйте прокрутить содержимое. Обратите внимание, что каждая новая строка столбцов заполняет область просмотра, а при каждой прокрутке содержимое аккуратно привязывается к началу новой строки.

Интерактивный пример column-height и column-count

Этот пример дополняет предыдущий двумя ползунками, позволяющими настраивать количество столбцов и их высоту в многоколоночном макете.

HTML и JavaScript

HTML-код такой же, как в предыдущем примере, но дополнен формой с двумя элементами <input="range">, которые обновляют значения column-count и column-height с помощью JavaScript. HTML-код и JavaScript скрыты для краткости.

<form>
  <div>
    <label for="columns">
      <code>column-count <output id="columns-output">3</output></code>
    </label>
    <input type="range" min="3" max="6" value="3" id="columns" />
  </div>
  <div>
    <label for="column-height">
      <code>column-height <output id="column-height-output">20em</output></code>
    </label>
    <input type="range" min="10" max="30" value="20" id="column-height" />
  </div>
</form>

const columnsRange = document.getElementById("columns");
const columnsOutput = document.getElementById("columns-output");
const columnHeightRange = document.getElementById("column-height");
const columnHeightOutput = document.getElementById("column-height-output");

columnsRange.addEventListener("input", () => {
  document.body.style.columnCount = columnsRange.value;
  columnsOutput.textContent = columnsRange.value;
});

columnHeightRange.addEventListener("input", () => {
  document.body.style.columnHeight = `${columnHeightRange.value}em`;
  columnHeightOutput.textContent = `${columnHeightRange.value}em`;
});

CSS

Мы задаём свойства column-rule и gap с теми же значениями, что и в предыдущем примере. Свойство column-width не задаётся; вместо этого мы создаём многоколоночный макет с помощью свойства column-count, интерактивно устанавливая с помощью JavaScript количество столбцов и высоту их строк. В этом примере привязка прокрутки не используется.

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

form {
  border: 1px solid black;
  background-color: white;
  padding: 10px;
  position: fixed;
  bottom: 1px;
  right: 1px;
}

form div {
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
}

Результат

Измените количество столбцов и их высоту, чтобы увидеть эффект этих свойств.

Спецификации

Совместимость с браузерами

См. также

• column-count
• column-width
• Сокращённое свойство columns
• column-wrap
• Модуль многоколоночного макета CSS CSS multi-column layout