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"