Why is my height: 100% property not working?

Question

I need this to be explained to me. I thought I understood CSS; clearly I haven't a bloody clue.

body {
    margin:0;
    padding:0;
}
#contain{
    position: relative;
    width: 100%
    height: 100%;
}
#wizard{
    position: absolute;
    left: 5%;
    width:10%;
    height: 100%;
    background-color: black;
}
#main{
    position: absolute;
    height: 100%;
    left: 15%;
    border-style: dashed;
    border-color: red;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <script>
            //css here, removed for purpose of the question
        </script>
    </head>
    <body>
        <div id="contain">
            <div id="wizard">
    
            </div>
            <div id="main">
            
            </div>
        </div>
    </body>
</html>

This is one of the most basic examples of CSS positioning, and I've used this many times before. I understand that this is "incorrect", but why? why do I only see a single red dot (the condensed, dashed border of #main) 15% from the left, and nothing else?

right! now we have somthing. So i need to declare this for every time i position? i havn't had to use this before — Simon., Apr 09 '15 at 19:56
Not really, it depends, well at least one of the parent div has to have a fixed width, otherwise it will track all the way back to body and html tags, until it finds a defined height, in this case 100%. — Stickers, Apr 09 '15 at 20:00
possible duplicate of [height:100%; not working](http://stackoverflow.com/questions/7049875/height100-not-working) — showdev, Apr 09 '15 at 23:08

score 2 · Answer 1 · answered Apr 09 '15 at 19:56

2

You are inheriting 100% height from nothing - so 100% of nothing is nothing. I don't know what your desired effect is exactly but you should set a height somewhere.

answered Apr 09 '15 at 19:56

ajmajmajma

13,712
24
79
133

score 2 · Accepted Answer · answered Apr 09 '15 at 19:58

Set the height to 100% for body and html, and this will provide a reference for your other elements.

You don't need to set the height to 100% for your positioned elements, simply set the top and bottom offsets to 0. If you want to use height: 100%, you may get some extra height due to the border, and you can fix that by specifying the property box-sizing: border-box.

body {
  margin: 0;
  padding: 0;
}
body, html {
  height: 100%;
}
#contain {
  position: relative;
  width: 100%;
  height: 100%;
}
#wizard {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5%;
  width: 10%;
  background-color: black;
}
#main {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15%;
  right: 0;
  border-style: dashed;
  border-color: red;
}

<div id="contain">
  <div id="wizard"></div>
  <div id="main"></div>
</div>

score 0 · Answer 3 · edited Apr 09 '15 at 21:10

0

This can sometimes solve the issue:

width:100vw;
height:100vh;

edited Apr 09 '15 at 21:10

ZygD

22,092
39
79
102

answered Apr 09 '15 at 20:24

OleHansen

1

score 0 · Answer 4 · answered Apr 09 '15 at 20:26

The height of your #contain div calculates its height from its parent elements: html, body. To rectify your height issue, explicitly set each of their heights to 100%.

The absolutely positioned #main div had no width, so was represented as a zero pixel point surrounded by a 3px dashed border, leaving you with a red 6px square.

This jsfiddle adds height: 100% to the html & body, and width: 5% to #main to make the change more clear.

http://jsfiddle.net/coreysan/49u3ygq1/4/

Note that you were missing a semicolon on the #contain width property, which would also cause you some problems :)

score -1 · Answer 5 · answered Apr 09 '15 at 19:53

-1

Try add "display: block" to your main

answered Apr 09 '15 at 19:53

Beto

233
2
3
10

Why is my height: 100% property not working?

5 Answers5