html - div inside li-tag inside ul-tag has an unexpected stretch/resize behavior -
my pen: http://codepen.io/anon/pen/gthpc
my goal pen have sort of stacked divs text vertically , horizontally centered.
when @ gray or red/blue "stack" see reached goal. comes quirk.
when resize window in height gray , red/blue stack gets shrinked in height there black (because background of body black) gap between gray , red/blue stack. gap visible depending @ point resize.
look @ image: 
the div around red/blue stack has of height 24.50 % take 100% 7 areas inside each of 7 'areas' inside div have height of 14.20 %
i have alreay tried value of 100% / 7 = 14.28571428571429 % instead of 14.20 % makes situation not better.
the black gap still there.
i use box-sizing:border-box; html elements available 24.50% divided 7 areas results in clean number of 3.50% height each area including border or padding use latest chrome.
so can not understand why there black gap when resize?
html
<div id="responsechart" style="height:100%;"> <div style="font-size:8px;;height:24.50%;"> <ul class="stack" style="height:100%;width:150px;float:left;"> <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">1</div></li> <li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">2</div></li> <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">3</div></li> <li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">4</div></li> <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">5</div></li> <li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">6</div></li> <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">7</div></li> </ul> <div class="dummy"></div> <div style="height:100%;width:100px;float:left;"> <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div> </div> <div class="dummy"></div> <div style="height:100%;width:75px;float:left;"> <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div> <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div> </div> <div class="dummy"></div> </div> <div style="background:darkred;height:1%;"></div> <div style="height:74.50%;"> <div style="height:100%;" id="chartbody"> <ul class="stack" style="width:150px;"> <li><div class="vertical-center horizontal-center" style="height:25%;">test1</div></li> <li><div class="vertical-center horizontal-center" style="height:50%;">test2</div></li> <li><div class="vertical-center horizontal-center" style="height:25%;">test3</div></li> </ul> <div class="dummy"></div> <div style="height:100%;width:100px;"> <div style="height:100%;" > <div class="push-center diagram" style="background-color:#aa11cc;height:25%;">1</div> <div class="push-center diagram" style="background-color:#aa44cc;height:50%;">2</div> <div class="push-center diagram" style="background-color:#aa66cc;height:25%;">3</div> </div> </div> <div class="dummy"></div> <div style="height:100%;width:75px;"> <div style="height:100%;"> <div class="push-center missingreplies" style="background-color:#fff;height:22%;">-1</div> <div class="push-center diagram" style="background-color:#ff99cc;height:11%;">3</div> <div class="push-center diagram" style="background-color:#ff33cc;height:44%;">44</div> <div class="push-center diagram" style="background-color:#ff66cc;height:23%;">36</div> </div> </div> <div class="dummy"></div> </div> </div> </div> css
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 license: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* html5 display-role reset older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body, html{ width:100%; height:100%; padding:5px; color:white; background:black; } *{ /* every element has border or padding value puts value inside div */ box-sizing:border-box; -moz-box-sizing:border-box; padding:0; margin:0; } #chartbody{ height:100%; background:darkgray; } .missingreplies{ border-top: gray dashed 1px; border-left: gray dashed 1px; border-right: gray dashed 1px; } .clear{ clear:both; } .diagram { color:white; font-weight:bold; border-bottom:white solid 1px; } #chartbody > div { height:100%; float:left; } .dummy{ float:left; background:grey; height:100%; width:30px; } .stack { display: table; height: 100%; float: left; } .stack li { list-style: none; display: table-row; } .stack li div { display: table-cell; } .horizontal-center { text-align: center; } .vertical-center { vertical-align: middle; }
when using display:table-row; <li> , display:table; <ul> there no need set height <li>, height of parent tag (in case <ul>) divide between child tags (in case <li>). @ demo
for more information can see http://linuxandfriends.com/how-to-style-div-elements-as-tables/
Comments
Post a Comment