Can't set height to header

[redonqerimi]

I’m trying to make a header which contains a search bar but for some reason when I set the header’s height to 11% of the page it just doesn’t work. However, if I use px units it does. How do I fix this?

Codepen

[zaklina]

The percentage is calculated with respect to the height of the generated box’s containing block . If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to ‘auto’. A percentage height on the root element is relative to the initial containing block . Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element.

[Jaydog]

Your title says height but your text says width? Either way you don’t appear to have put any content within your header divs yet so how would you know if it’s working?
Divs generally take up no space until you put content in them

[jsdisco]

You already got a good explanation, here’s the same in code:

html, body {
  height: 100%;
}