# height

{% tabs %}
{% tab title="👥 相關" %}

* [VStack/HStack](https://lochiwei.gitbook.io/web/layout/system/vstack#problems)
  {% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}

## set height explicitly <a href="#explicitly-set-height" id="explicitly-set-height"></a>

{% hint style="warning" %}
**Avoid** explicitly setting the **height** of an element to avoid **overflow** issues.
{% endhint %}

{% hint style="danger" %}

* Specifying a [% height](https://lochiwei.gitbook.io/web/css/values/unit/relative/percentage) is **problematic**.&#x20;
* **%** refers to the **parent**'s size.
* **parent's height** is typically **determined** by the **height of its children**. This produces a **circular definition** that the browser can’t resolve, so it’ll **ignore** the declaration.&#x20;
  {% endhint %}

## height: 100%

{% hint style="danger" %}

* For **percentage**-based **heights** to work, the **parent** must have an **explicitly defined height**. 🗣 [Why doesn't height: 100% working?](https://stackoverflow.com/a/7049918/5409815)
* 如果都是用 **%**，則一路從 **html**  ⟩ **body** ⟩ ....  ⟩ 到自己的**直屬母物件**都要明確設定 **%**，否則只要中間有一層斷掉也是沒用。
  {% endhint %}

{% tabs %}
{% tab title="height: 100%" %}

```css
/*
   當我們設定 height: 100% 時，此設定並不會真正發生作用，
   除非它的母物件有「明確設定」height。
   ⭐️ 注意：設定母物件的 min-height 並沒有幫助❗️
 */
i-vstack:only-child {
    height: 100%;
}
```

{% endtab %}

{% tab title="🗣 討論" %}

* 🗣 [Why doesn't height: 100% working?](https://stackoverflow.com/a/7049918/5409815)
  {% endtab %}
  {% endtabs %}