html5 - CSS3 margins and 100% width/height declarations -
i'm surprised: there tons of posts asking 100% height situations, ones include *margins in child element don't yield workable responses.
surely common, no? i'm struggling margins causing child element overflow. see fiddle below.
my css so:
html, body {height:100%} // doing 1 100% height issues div { box-sizing:border-box; // box model consistent, need webkit } #outer { border:1px solid #f00; position:absolute; // requirement top:40px; left:12px; width:300px; } #inner { position:relative; // i'm hoping avoid absolute border:1px solid #0f0; margin:10px 20px; height:100%; width:100%; }
fiddle: http://jsfiddle.net/3apzq/
the prized question is: how child element (green border) inline of parent, correct margins?
you can't use width 100% in case, because width calculated before apply margin. inner div have 300px width, , 20px margin.
it's better use margin parameters:
#inner { position:relative; border:1px solid #0f0; margin:10px 20px 10px 20px; }
Comments
Post a Comment