0

I am trying to set font size, family and line-height on a div. I then need to know the correct height of the div for some layout stuff. However, the height I am getting is wrong, and a scrollbar is appearing on the div's parent for probably the same reason. The following jsfiddle best illustrates my problem: http://jsfiddle.net/JYkAX/19/

Here is the html:

<div class="separator">
    <div class="PleaseNoScrollBar"> 
        Some Text Here
    </div>
</div>

Here is the css:

.separator
{
    background: gray;
    display: block;
    overflow: auto;
}

.PleaseNoScrollBar
{
    font-family: cursive;
    background: lightgray;
    line-height: 32px;
    font-size: 32px;
    display: block;
    opacity: 0.5;
    vertical-align: top;
}

The following jquery retrieves the outer height of the div (but its incorrect).

alert($(".PleaseNoScrollBar").outerHeight());

Any ideas on what is causing this? Unfortunately, I need to be able to retrieve the actual outer height of the div, I can't just make the parent div larger.

I should mention, the scrollbar only appears in Chrome and IE. In firefox the div is scrollable by dragging the mouse, but no scrollbar appears.

pulekies
  • 894
  • 2
  • 10
  • 20
  • Can you clarify what you are actually expecting? I looked at the jsFiddle you provided and the JS alert pops up "32", which is exactly what you specified. – Steve Mar 22 '13 at 17:01
  • works for me, alerts `32` – chriz Mar 22 '13 at 17:02
  • Sure. The parent ('.separator') is 32px. The child ('.PleaseNoScrollBar') is actually larger than 32px, as shown by the fact that it makes its parent scroll. – pulekies Mar 22 '13 at 17:22

3 Answers3

1

You are viewing a scrollbar cause you set overflow:auto; on .separator. Just remove it and you won't have scrollbars anymore.

As for the height, the alert function retrieves "32" which is, I think, the correct height of the div.

Clément Grellier
  • 145
  • 1
  • 9
  • 'Overflow: auto' should only show a scrollbar if its child is larger than it. Since I set no size on '.separator' it shouldn't scroll.. – pulekies Mar 22 '13 at 17:16
0

Remove the overflow:auto declaration from the container div.

.separator
{
    background: gray;
    display: block;
    overflow: auto;
}

from the w3c spec...

overflow: auto The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

source: http://www.w3.org/TR/CSS21/visufx.html#overflow

this means that the folks that coded the browser determine how overflow:auto works. If you set the height of the . separator div to 34px, the scrollbar goes away.

I would recommend removing the overflow:auto from the .separator div.

Check out this: http://jsfiddle.net/JYkAX/26/

If the height of the container div is set to anything less than two pixels greater than the child elements height, the scrollbar shows up. My guess is that the browser adds the 1px border that is added to both the top and bottom when an "overfow auto" is declared.

superUntitled
  • 22,351
  • 30
  • 83
  • 110
  • This would get rid of the scrollbar. Unfortunately, I also need the actual height of the '.PleaseNoScrollBar' div. – pulekies Mar 22 '13 at 17:17
  • I need to know why the scrollbar appears on the parent in the first place, since it should be sizing to accomodate the child. – pulekies Mar 22 '13 at 17:50
  • see my edits, i have not found a resource on how browsers calculate overflow heights. – superUntitled Mar 22 '13 at 18:45
0

I have had similar issue, while using font from Google Fonts and it had implicitly set line-height of 1.5em, which the jQuery probably did not see. Once I explicitly wrote line-height:1.5em to my CSS reset (or website font setting), it was OK.

Lukáš Řádek
  • 1,273
  • 1
  • 11
  • 23