html - CSS height set to percent, is it relative to the parents content box, or padding box, etc -
mdn says:
the percentage calculated respect height of generated box's containing block. so have containing block contains child element. child element has height: 100% or other percent.
if containing block has height, padding, , border set, child elements height calculated 100% of containing block's content-box height, padding-box height, border-box height?
if change box-sizing of container block, make other changes such container block's content-box/padding-box/border-box sizes not change, size of child element affected?
edit: apparently padding-box experimental , supported ff.
the % based size of child indeed calculated respect size of parent, , take account box-sizing.
see demo:
.box { width: 100px; height: 100px; padding: 10px; margin: 10px; border: 10px solid black; background-color: red; color: white; } .content-box { box-sizing: content-box; } .border-box { box-sizing: border-box; } .child { width: 100%; height: 100%; background-color: blue; }<body> <div class="box content-box"> <div class="child">content box</div> </div> <br/> <div class="box border-box"> <div class="child">border box</div> </div> </body>
Comments
Post a Comment