A question about height

Question

I don't understand why does my height property doesn't work when I set it to %100. Here is code:

https://code.sololearn.com/WXQyoB1vYaNF/?ref=app

I expected that the whole screen will become purple. Could anyone explain it?

Answer 1

To stretch an element on the whole screen, all the parents of the element should have 100% too.
https://code.sololearn.com/W9Sb0ujTLId0/?ref=app
P.S. Values should be 100%, not %100😊

Answer 2

Joseph Hardrock, you are welcome, glad to help👍😊

Answer 3

Thank you so much. I really get stuck on this. 100% 👍

Answer 4

Use
display: inline-block;
height: 100vh;
width: 100vw;
for a parent element stretch to full screen.
https://code.sololearn.com/WyBuiTZ3ptnM/?ref=app

Answer 5

1) Units must be wited form of value[unit]. At example:

height:100%;

you writed %100; thats invalid

3) If you use relative size, it will be sized relative to parent specific size. At example if you set height:100% to a element, it will have 100% (equal) height of parent, same for parent of parent... If in this tree dont exist some element that have some "fixed" height, all tree element cannot calculate height properly. In you exampl you set a div to height 100% direcr child of body BUT body have not fixed size then browser cannot calculate height of your div. If you want make your div (or body) height like page, you can use absolute position with top:0 bottom:0 width:100% (take cure to remove margin and border also)

Answer 6

If you want a background, you can apply the colour to your body.

body{
background-color: purple;
}

Just in case you didn't know, but you probably do.

Answer 7

1. You typed the width and height incorrectly. It should be:

height:100%;
width:100%;

As you can can see, the percent symbol comes after the value.

2. 100% of nothing is nothing. Try adding width and height to the body. Like this:

html, body {
margin:0;
width:100%;
height:100%;
}

Remember, the parent of an element needs to have width and height values to use percentages, since it's taking it from the parent.

3. You could just set the body background color to purple:

body {
background-color:purple;
}