Что здесь происходит?Переполнение CSS переопределяет переполнение?
#agendaTitle{
margin:0;
padding:20em 0em 0em 0.75em;
height:3em;
overflow:hidden;
background-color:#ff00ff;
}
Верхняя обивка смехотворно высок, чтобы продемонстрировать - с реалистическим требованием к ДИВ еще увеличивает высоту пропорционально.
Несомненно, overflow:hidden означает, что я должен просто увидеть блок цвета? Встречается в FF и IE
В окне модели на display: block элемента по умолчанию content-box, padding и height складываются вместе, чтобы определить общую высоту элемента. overflow влияет только на вещи вне коробки (вне высоты + прокладка + граница).
Если вы хотите, чтобы граница и отступы вычитались из указанной высоты, а не добавлялись, используйте box-sizing: border-box.
Я поражен тем, сколько лет я не знаю, добавление увеличивает размер коробки. На самом деле я совершенно поражен. В любом случае, поскольку большинство других ответов были правильными, это был первый опубликованный – Datadimension
@TimHigham Спасибо! На самом деле, старые версии IE используют модель окна «border-box», где отступы и граница вычитаются из высоты, а не добавляются к ней, как в коробке по умолчанию для CSS-содержимого. Они не добавляли поддержку стандартно-совместимой модели содержимого контента до IE6, и даже тогда она не была дефолтом! – Ennui
IE - вам не нравится! – Datadimension
Как это
CSS
*{
margin:0;
padding:0;
}
#agendaTitle{
margin:0;
padding:0.75em 0em 0em 0.75em;
height:3em;
overflow:hidden;
background-color:#ff00ff;
}
Вы установили высоту до 3em, поэтому он покажет окончательную высоту (3em + 20em).
И переполнение ограничивает только высоту i.e 3em.
Что вы спрашиваете? Попытайтесь объяснить лучше и опубликуйте его на JSFiddle, пожалуйста. – Ennui
Предполагая, что вы используете модель окна по умолчанию (область содержимого), которая должна отображаться в виде 23-кратного большого сплошного блока цвета (при условии, что он находится на элементе 'div' или другом' display: block'). добавление добавляется к высоте, и ни один из них не является «внешним» полем или будет скрыт при переполнении. Если вы хотите, чтобы наложение вычиталось из высоты, а не добавлялось к нему, используйте 'box-sizing: border-box'. – Ennui