当提供字体大小，系列和行高时div高度不正确

我正在尝试在div上设置字体大小，系列和行高。然后我需要知道一些布局的东西的正确的div的高度。然而，我得到的高度是错误的，并且滚动条出现在div的父项中可能是出于同样的原因。下面的jsfiddle最能说明我的问题： http://jsfiddle.net/JYkAX/19/当提供字体大小，系列和行高时div高度不正确

下面是HTML：

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

这里是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; 
}

以下的jQuery检索div的外部高度（但它不正确）。

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

什么是造成这种情况的任何想法？不幸的是，我需要能够检索div的实际外部高度，我不能只让父div更大。

我应该提到，滚动条只出现在Chrome和IE中。在Firefox中，div可以通过拖动鼠标来滚动，但不会出现滚动条。

来源

2013-03-22 pulekies

你能澄清你实际上期待什么吗？我看着你提供的jsFiddle，JS警报弹出“32”，这正是你指定的。 – Steve 2013-03-22 17:01:43

适合我，警报'32' – chriz 2013-03-22 17:02:44

当然。父（'.separator'）是32px。孩子（'。PleaseNoScrollBar'）实际上大于32px，正如它使其父滚动的事实所示。 – pulekies 2013-03-22 17:22:30

从容器div中删除overflow:auto声明。

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

从W3C规范...

溢出：汽车“自动”价值的行为是用户代理相关的，但是应促使提供一个滚动机制溢出框。

来源：http://www.w3.org/TR/CSS21/visufx.html#overflow

这意味着编码浏览器的人决定如何overflow:auto作品。如果将. separator div的高度设置为34px，则滚动条将消失。

我建议从.separator div中删除overflow:auto。

看看这个：http://jsfiddle.net/JYkAX/26/

如果容器div的高度设置为任何大于子元素高度大不到两个像素，滚动条显示出来。我的猜测是，当声明“overfow auto”时，浏览器添加添加到顶部和底部的1px边框。

来源

2013-03-22 17:02:04 superUntitled

这将摆脱滚动条。不幸的是，我还需要'.PleaseNoScrollBar'div的实际高度。 – pulekies 2013-03-22 17:17:54

我需要知道为什么滚动条首先出现在父级上，因为它应该是适应孩子的大小。 – pulekies 2013-03-22 17:50:23

看到我的编辑，我还没有找到浏览器如何计算溢出高度的资源。 – superUntitled 2013-03-22 18:45:45

您正在查看滚动条，因为您在.separator上设置了overflow:auto;。只要删除它，你就不会再有滚动条了。

至于高度，警报功能检索“32”，这是我认为，div的正确高度。

来源

2013-03-22 17:03:14

'溢出：自动'应该只显示一个滚动条，如果它的孩子比它大。由于我没有在'.separator'上设置大小，它不应该滚动。 – pulekies 2013-03-22 17:16:18

当提供字体大小，系列和行高时div高度不正确

回答

相关问题