Percentage sizing CSS

Question

My header doesn't appear anywhere. I would like to know how to fix it.

body {
  background-color: antiquewhite;
  font-size: 100%;
  width: 100%;
  height: auto;
}
nav {
  height: 8%;
  width: 100%;
  position: fixed;
  display: block;
  background-color: grey;
  z-index: 1000;
}
header {
  width: 100%;
  background-image: url("https://placehold.it/50/50");
}

<nav>
  <h1>...</h1> 
</nav>

<header>
</header>

How can we help you without you giving us the HTML. Give full code. — Saurav Rastogi, Dec 15 '16 at 15:32
Its all ok on my side, are you passing the image path `url` correctly? — Saurav Rastogi, Dec 15 '16 at 15:39

score 4 · Accepted Answer · answered Dec 15 '16 at 15:38

4

This would do the trick:

html, body {height:100%;}

if you use percentage for height the parent needs to have a fixed height (so actually it's 8% of something) or at least ALL parents till html tag need to have a percentage height.

answered Dec 15 '16 at 15:38

Alvaro Menéndez

8,766
3
37
57

score 0 · Answer 2 · edited May 23 '17 at 12:30

My first thought would be give that header element some (html-)content (like text) or specify a height explicitly as of my experience container elements are not "shown" when their boundaries are not declared in any way.

Otherwise you may have a look here as this seems to be the same problem basically to me.

If you are using e.g. Firefox, you can use rightclick->inspect element to see if the element is simply not rendered (i.e. because of no height) or otherwise trace the applied css, manipulate css in place (non permanent) or even debug javascript.

Hope this helps.

score 0 · Answer 3 · answered Dec 15 '16 at 15:48

0

The header tag has no contents, and therefore 0 height. Try adding some text inside the header tags or add a height with css.

answered Dec 15 '16 at 15:48

DraganAscii

322
1
9

Percentage sizing CSS

3 Answers3