Height

The height style sets a widget's height.

Syntax

height: <scalar>;

The height style needs a <scalar> to determine the vertical length of the widget. By default, it sets the height of the content area, but if box-sizing is set to border-box it sets the height of the border area.

Examples

Basic usage

This examples creates a widget with a height of 50% of the screen.

Outputheight.pyheight.tcss

from textual.app import App
from textual.widget import Widget


class HeightApp(App):
    CSS_PATH = "height.tcss"

    def compose(self):
        yield Widget()


if __name__ == "__main__":
    app = HeightApp()
    app.run()

Screen > Widget {
    background: green;
    height: 50%;
    color: white;
}

All height formats

The next example creates a series of wide widgets with heights set with different units. Open the CSS file tab to see the comments that explain how each height is computed. (The output includes a vertical ruler on the right to make it easier to check the height of each widget.)

Outputheight_comparison.pyheight_comparison.tcss

from textual.app import App
from textual.containers import VerticalScroll
from textual.widgets import Label, Placeholder, Static


class Ruler(Static):
    def compose(self):
        ruler_text = "·\n·\n·\n·\n•\n" * 100
        yield Label(ruler_text)


class HeightComparisonApp(App):
    CSS_PATH = "height_comparison.tcss"

    def compose(self):
        yield VerticalScroll(
            Placeholder(id="cells"),  # (1)!
            Placeholder(id="percent"),
            Placeholder(id="w"),
            Placeholder(id="h"),
            Placeholder(id="vw"),
            Placeholder(id="vh"),
            Placeholder(id="auto"),
            Placeholder(id="fr1"),
            Placeholder(id="fr2"),
        )
        yield Ruler()


if __name__ == "__main__":
    app = HeightComparisonApp()
    app.run()

1. The id of the placeholder identifies which unit will be used to set the height of the widget.

#cells {
    height: 2;       /* (1)! */
}
#percent {
    height: 12.5%;   /* (2)! */
}
#w {
    height: 5w;      /* (3)! */
}
#h {
    height: 12.5h;   /* (4)! */
}
#vw {
    height: 6.25vw;  /* (5)! */
}
#vh {
    height: 12.5vh;  /* (6)! */
}
#auto {
    height: auto;    /* (7)! */
}
#fr1 {
    height: 1fr;     /* (8)! */
}
#fr2 {
    height: 2fr;     /* (9)! */
}

Screen {
    layers: ruler;
    overflow: hidden;
}

Ruler {
    layer: ruler;
    dock: right;
    width: 1;
    background: $accent;