Неверная высота, когда заданы размер шрифта, семья и высота строки

Я пытаюсь установить размер шрифта, семью и длину строки на div. Затем мне нужно знать правильную высоту div для некоторых макетов. Тем не менее, высота, которую я получаю, ошибочна, и полоса прокрутки появляется у родителя div, по той же причине. Следующий jsfiddle лучше всего иллюстрирует мою проблему: http://jsfiddle.net/JYkAX/19/Неверная высота, когда заданы размер шрифта, семья и высота строки

Вот 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

работает для меня, оповещения '32' – chriz

Конечно. Родительский («.сепаратор») - 32px. Ребенок ('.PleaseNoScrollBar ') на самом деле больше 32 пикселей, о чем свидетельствует тот факт, что он выполняет родительский свиток. – pulekies

Извлечь декларацию overflow:auto из контейнера div.

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

от w3c спецификации ...

переполнение: авто Поведения значения «Авто» является агентом пользователя-зависимым, но должен вызывать механизм прокрутки, чтобы быть предусмотрен переполненный коробки.

Источник: http://www.w3.org/TR/CSS21/visufx.html#overflow

это означает, что люди, которые закодированы браузер определяют, как overflow:auto работы. Если вы установите высоту . separator div на 34px, полоса прокрутки исчезнет.

Я бы порекомендовал удалить overflow:auto с .separator div.

Проверьте это: http://jsfiddle.net/JYkAX/26/

Если высота контейнера DIV установлен на что-нибудь менее чем на два пикселя больше, чем высота дочерних элементов, то полоса прокрутки показывает вверх. Я предполагаю, что браузер добавляет границу 1px, которая добавляется как вверху, так и внизу, когда объявляется «overfow auto».

источник

2013-03-22 17:02:04 superUntitled

Это избавит вас от полосы прокрутки. К сожалению, мне также нужна фактическая высота div .PleaseNoScrollBar. – pulekies

Мне нужно знать, почему полоса прокрутки появляется на родительском устройстве в первую очередь, так как это должно быть определение размера для размещения ребенка. – pulekies

см. Мои изменения, я не нашел ресурс о том, как браузеры вычисляют высоты переполнения. – superUntitled

Вы просматриваете полосу прокрутки, потому что вы устанавливаете overflow:auto; на .separator. Просто удалите его, и у вас больше не будет полос прокрутки.

Что касается высоты, функция предупреждения извлекает «32», что, я думаю, правильная высота div.

источник

2013-03-22 17:03:14

«Переполнение: авто» должно показывать только полосу прокрутки, если ее дочерний объект больше. Поскольку я не задал размер на «.сепараторе», он не должен прокручиваться. – pulekies

Неверная высота, когда заданы размер шрифта, семья и высота строки

ответ

Смежные вопросы