+ 1

Why height of SVG is not setting to 50%

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

14th Apr 2020, 1:26 PM
Himanshu Rai
Himanshu Rai - avatar
6 Réponses
+ 2
Any element has always a parent element. The only 'element' wich has no parent is the root documeny element (<html>)... In your case, <body> is the parent of your <svg> ;) Since <body> (or any block level element with default behavior unchanged) has no explicit height setted, it will have an auto-height regarding the needs of its content (even if background property apply to the entire viewport ^^). So 50% of <svg> parent could no be computed and svg height belong to its default value ;) You could force the body to have explicit height, by adding this to your css: html { height:100%; } body { height:100%; margin:0; } the html height is required to have a root explicit height to apply descendant percentages, zero margin (and padding, at least both at top and bottom -- but padding default to zero) for body is required to avoid total height (body height+margin+padding) being more than the viewport (display) height...
14th Apr 2020, 8:34 PM
visph
visph - avatar
+ 3
Because its relative to its parent element.
14th Apr 2020, 2:07 PM
Toni Isotalo
Toni Isotalo - avatar
0
How
14th Apr 2020, 2:22 PM
Himanshu Rai
Himanshu Rai - avatar
0
I have not used svg in any parent element. And body tag defines the content to be showed in browser, then how can this affect svg??? Please describe answer
14th Apr 2020, 2:24 PM
Himanshu Rai
Himanshu Rai - avatar
14th Apr 2020, 5:03 PM
dozule
dozule - avatar
0
Thanks visph for eleborating so much clearly☺️.
15th Apr 2020, 1:49 AM
Himanshu Rai
Himanshu Rai - avatar