mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
72327d6392
Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>
52 lines
791 B
Markdown
52 lines
791 B
Markdown
# Height
|
|
|
|
The `height` rule sets a widget's height. 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.
|
|
|
|
## Syntax
|
|
|
|
```
|
|
height: <SCALAR>;
|
|
```
|
|
|
|
## Example
|
|
|
|
This examples creates a widget with a height of 50% of the screen.
|
|
|
|
=== "height.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/height.py"
|
|
```
|
|
|
|
=== "height.css"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/height.css"
|
|
```
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/height.py"}
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Explicit cell height */
|
|
height: 10;
|
|
|
|
/* Percentage height */
|
|
height: 50%;
|
|
|
|
/* Automatic height */
|
|
width: auto
|
|
```
|
|
|
|
## Python
|
|
|
|
```python
|
|
self.styles.height = 10
|
|
self.styles.height = "50%
|
|
self.styles.height = "auto"
|
|
```
|