+ 3

A question about height

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?

9th Jul 2018, 7:09 PM
Yusuf
Yusuf - avatar
7 Answers
+ 12
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😊
9th Jul 2018, 7:48 PM
NezhnyjVampir
+ 13
Joseph Hardrock, you are welcome, glad to help👍😊
9th Jul 2018, 7:52 PM
NezhnyjVampir
+ 5
Thank you so much. I really get stuck on this. 100% 👍
9th Jul 2018, 7:51 PM
Yusuf
Yusuf - avatar
+ 4
Use display: inline-block; height: 100vh; width: 100vw; for a parent element stretch to full screen. https://code.sololearn.com/WyBuiTZ3ptnM/?ref=app
12th Jul 2018, 2:02 AM
CalviŐ˛
CalviŐ˛ - avatar
+ 3
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)
9th Jul 2018, 7:59 PM
KrOW
KrOW - avatar
+ 1
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.
10th Jul 2018, 12:55 AM
James
James - avatar
+ 1
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; }
10th Jul 2018, 7:53 AM
Daniel Cooper
Daniel Cooper - avatar