diff --git a/docs/examples/styles/height_comparison.css b/docs/examples/styles/height_comparison.css
new file mode 100644
index 000000000..ca2737e07
--- /dev/null
+++ b/docs/examples/styles/height_comparison.css
@@ -0,0 +1,34 @@
+#cells {
+    height: 2;       /* (1)! */
+}
+#percent {
+    height: 12.5%;   /* (2)! */
+}
+#w {
+    height: 5w;      /* (3)! */
+}
+#h {
+    height: 12.5h;   /* (4)! */
+}
+#vw {
+    height: 7.5vw;   /* (5)! */
+}
+#vh {
+    height: 12.5vh;  /* (6)! */
+}
+#auto {
+    height: auto;    /* (7)! */
+}
+#fr1 {
+    height: 1fr;     /* (8)! */
+}
+#fr2 {
+    height: 2fr;     /* (9)! */
+}
+
+VerticalRuler {
+    dock: right;
+    overflow: hidden;
+    width: auto;
+    background: $accent;
+}
diff --git a/docs/examples/styles/height_comparison.py b/docs/examples/styles/height_comparison.py
new file mode 100644
index 000000000..b24f257aa
--- /dev/null
+++ b/docs/examples/styles/height_comparison.py
@@ -0,0 +1,28 @@
+from textual.app import App
+from textual.containers import Vertical
+from textual.widgets import Placeholder, Label, Static
+
+
+class VerticalRuler(Static):
+    def compose(self):
+        ruler_text = "\n".join(map(str, range(1, 100)))
+        yield Label(ruler_text)
+
+
+class HeightComparisonApp(App):
+    def compose(self):
+        yield Vertical(
+            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 VerticalRuler()
+
+
+app = HeightComparisonApp(css_path="height_comparison.css")