HTML5 Relative Units

Question

I want to make a HTML5 website using relative units. What would I want to use? Percentage?

I'm trying to do the following but my header isn't 10% of the body. At least it isn't displaying as such. The CSS below is what is contained within main.css.

body{
  background-color:red;
  width:100%;
  height:100%;
}
header{
  margin-right:auto;
  margin-left:auto;
  width:960px;
  background-color:#000000;
  height:10%;
}

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta content="UTF-8">
    <link rel="stylesheet" href="stylesheets/main.css">
  </head>
  <body>
    <header>
      testing
    </header>
  </body>
</html>

Read this: http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work — Sumit Sahay, Feb 14 '16 at 08:28
Conclusion: Give height to the body in px and it will start working — Sumit Sahay, Feb 14 '16 at 08:36

score 1 · Answer 1 · answered Feb 14 '16 at 09:15

1

I think you need to apply 'height: 100%' at 'html' element too in order to use relative sizes for page's elements.

html { height: 100%; }

answered Feb 14 '16 at 09:15

Dom Corvasce

201
1
7

score 0 · Answer 2 · answered Feb 14 '16 at 10:32

try this css:

html{
height:100%;
min-height:100%;
}

body{height:100%;}

header{height:10%;
background:red;
width:100%;
margin:0 auto;}

and i suggest you to use this reset css:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

reset.css source http://meyerweb.com/eric/tools/css/reset/

M. Salman Khan · Answer 3 · 2016-02-14T12:06:53.643

As others have said, you need to give the parent of all containers a height for you to be able to use percentage heights: html, body { height: 100%}. Any percentage heights from now on well be relative to their closest parent that has a set height.

But I just wanted to add that an alternative unit is vh (viewport height) which is a percentage of the viewpoint's height. So you can replace your height : 10%; with height: 10vh;. This is, of course not relative to the parent container, so it's slightly different to % units.

HTML5 Relative Units

3 Answers3