+ 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

6 ответов

+ 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

+ 3

Because its relative to its parent element.

14th Apr 2020, 2:07 PM

Toni Isotalo

How

14th Apr 2020, 2:22 PM

Himanshu Rai

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

Try this in a web browser. https://code.sololearn.com/WSwg9VWW9P9q/?ref=app

14th Apr 2020, 5:03 PM

dozule