html - scroll bars showing up when not expecting them line-height and overflow-y issue -
i getting unexpected (to me) behaviour vertical scroll bar showing up. not understand constraint on height of container might be.
i able make problem go away either changing li's margin:1 or set ul's lineheight: normal instead of 1.
can explain occurring? height have exceeded requires vertical scrollbar?
i created simple jsfiddle illustrate issue having.
html code:
<div class="content-section" > <ul > <li>cheese</li> <li>crackers</li> </ul> </div>
css code:
body { line-height: 1; } ul { margin: 0; } .content-section { overflow-y: auto; }
this because line-height
set 1, means line-height same font-size. causes font overflow line. need set line-height
value greater height of text, may have guessed. text technically behaving should. height of box defined height of lines, text ever larger lines. line-height should never equal font-size readability standpoint. hope helps. know doesn't tell height coming from, believe have explored multiple means of combating it.
Comments
Post a Comment