CODEWITHSUNDEEP
htmlcss
badMonkey
badMonkey

Reputation: 1727

scroll bars showing up when not expecting them line-height and overflow-y issue

I am getting an unexpected (to me) behaviour where a vertical scroll bar is showing up. I do not understand what the constraint on the height of the container might be.

I am able to make this problem go away by either changing the LI's margin:1 or set the UL's lineheight: normal instead of 1.

Can anyone explain what is actually occurring? That is to say what height have I exceeded that requires a vertical scrollbar?

I created a very simple JSFIDDLE to illustrate the issue I am having.

body {
  line-height: 1;
}

ul {
  margin: 0;
}

.content-section {
  overflow-y: auto;
}
<div class="content-section">
  <ul>
    <li>cheese</li>
    <li>crackers</li>
  </ul>
</div>

Upvotes: 15

Views: 4914

Answers (3)

soulcm
soulcm

Reputation: 11

I also had this problem. I have a scene when need set max-height and need scroll when cross the height, so I need to set overflow:auto, but when not cross the height, the scroll also show up.

I adjusted line-height to be larger and the scroll disappeared.

Upvotes: 1

aaronburrows
aaronburrows

Reputation: 1020

This is because your line-height is set to 1, which means the line-height is the same as the font-size. This causes the font to slightly overflow the line. You need to set line-height to a value greater than the height of the text, as you may have guessed. The text is technically behaving as it should. The height of the box is defined by the height of the lines, but the text is ever so slightly larger than the lines. Your line-height should never be equal to your font-size from a readability standpoint. I hope this helps. I know it doesn't exactly tell you where the height is coming from, but I believe you have successfully explored multiple means of combating it.

Upvotes: 12

Huangism
Huangism

Reputation: 16438

I am not sure why you need the overflow to set to auto, if you remove it then problem solved

If the content-section need to be a certain height, then set the height and the scroll bar will appear if it needs to be (if you need the overflow)

http://jsfiddle.net/pGuHG/2/

.content-section {
    overflow-y: auto;
    height: 100px;
}

Upvotes: 0

Related Questions