Unit Rulebook

Type a unit, or a word from its description.

    cqh

    One percent of the nearest query container's height.

    Safe to useBaseline: widely available

    First version with support, from MDN browser data
    BrowserSince
    Chrome105+
    Chrome Android105+
    Edge105+
    Firefox110+
    Firefox Android110+
    Safari16+
    Safari iOS16+

    Formula 1cqh = 1/100 of the nearest container's height

    How it works

    1cqh is a hundredth of the nearest query container’s height, and it asks more of the container than cqw does. The height must be known without looking at the children, which needs container-type: size. That setting makes the container’s size independent of its content, so a container with no explicit height collapses to zero and cqh is zero too.

    With only container-type: inline-size there is no height to measure. The unit still resolves, to the small viewport height, so 10cqh in such a container is 10svh. A card that sets inline-size and uses cqh inside it ends up sized by the window without saying so.

    In practice cqh suits fixed-height widgets such as a dashboard tile, a carousel frame or a chart panel, where the author sets the height. For text blocks that grow with content, use cqw or cqi.

    Try it

    A container you can resize

    Drag the sliders. The box is a real query container, and the readings are 10 of each container unit measured inside it.

    Container, measured
    300 × 140px
    10cqw
    30px
    10cqh
    14px
    10cqi
    30px
    10cqb
    14px
    10cqmin
    14px
    10cqmax
    30px
    The same as a table
    Ten of each container unit in two containers
    Unit300 × 140px500 × 140px
    10cqw30px50px
    10cqh14px14px
    10cqi30px50px
    10cqb14px14px
    10cqmin14px14px
    10cqmax30px50px

    What changes it

    Moves with
    • page zoom
    • the query container
    Stays put under
    • the reader's text size
    • the window size
    • the font in use
    • phone toolbars
    • the writing mode

    Reach for it when

    Fixed-height widgets such as dashboard tiles and chart panels.

    Watch out

    container-type: size is the only setting that lets the height be queried, and it also cuts the box off from its children's height. Give the container a block-size, or it measures 0px and so does everything in cqh.

    Example A size container with no height of its own is 0px tall, and so is the chart. The block-size line fixes both.

    Before

    .panel {
  container-type: size;
}
.panel .chart {
  block-size: 80cqh;
}

    After

    .panel {
  container-type: size;
  block-size: 20rem;
}
.panel .chart {
  block-size: 80cqh;
}
    • cqwOne percent of the nearest query container's width.
    • cqbOne percent of the container's block size, the direction lines stack along.
    • vh1% of the viewport's height.

    MDNSpecification