# Wrapper taking up at least 100% height

Height is different to width in that, whereas the default width behaviour is to fill the available space, the default height behaviour is to be as small as possible.

A common source of frustration is to make an element take up *at least* 100% of the available height (say, to position a footer at the bottom of a page, regardless of the content's length).

```css
html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
}
```

## Why not `vh`?

The `vh` unit, or viewport height, appears to be designed exactly for this purpose. However, it leads to some unfortunate effects, especially on mobile devices. Because the address bar and footer controls on mobile browsers will slide away as the user scrolls, the viewport height changes. These browsers will set `vh` equal to the *maximum viewport height*, after scrolling, which won't match the viewable area when the controls are visible.

## Footer at the bottom

A max height wrapper is a pre-requisite for positioning a footer at the bottom of the page. To do it, we can use flexbox:

```css
html, body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.footer {
  margin-top: auto;
}
```

```markup
<div class="wrapper">
  <p>
    Content
  </p>
  <footer>At the bottom</footer>
</div>
```

[Source](https://courses.joshwcomeau.com/css-for-js/01-rendering-logic-1/11-height)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://notes.eliasnorrby.com/css/fill-height-wrapper.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.