Высота Div, не адаптирующаяся к родительскому

Question

Продолжая разработку моего мобильного сайта html5/css3, я затрудняюсь настроить высоту div на родителя.

http://jsfiddle.net/1eg2cwLs/

скрипка точно не выглядит так, потому что я использую WebFonts (сохраненный на форуме, хотя, как я не буду иметь подключение к Интернету на целевой системе). Но проблема остается прежней.

Возможно, вы видите, что проблема находится прямо с места, если нет: я бы хотел, чтобы зеленый и красный бар (.itemclass) всегда имели тот же размер, что и содержимое его родителя (.item).

В зависимости от шрифта, его размера (все еще играющего с ним) и общей высоты каждого элемента, я должен точно настроить отрицательный запас. В противном случае это похоже на скриншот. Отрицательная маржа я только что упомянул это в CSS-классе .itemclass: (отмечен стрелка также в скрипке) ...

.itemclass { 
    height: 100px; 
    width: 50px; 
    background-color: #27ae60; 
    vertical-align: middle; 
    text-align: center; 
    color: white; 
    font-size: 2em; 
    margin-top: -27px; /* <=== */ 
    display: inline-block; 
} 

Это не может быть решением. Я пробовал много вещей, и я только получил его, «работая» так, как я упоминал.

Любая идея, как сделать его выглядеть чистым без взлома?

Кроме того, советы по другим улучшениям, касающимся моего html/css, хорошо оценены.

Извините за добавление всего кода в скрипку. Я не знаю, было ли это представительным, если я собираюсь удалить вещи.

С наилучшими пожеланиями

Answer 1

Я бы, наверное, идти по этому пути:

.item { 
    position: relative; 
    ... 
} 
.itemclass { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    ... 
} 
.itemcontent { 
    margin-left: 50px; 
    ... 
} 

Demo

Really big font demo

Рассмотрим разумную мин ширину для тела, чтобы предотвратить .tagline от перекрытия и т.д. .

Answer 2

overflow: hidden; ваш лучший друг в этом случае! Он скрывает любое содержимое переполнения с просмотра за пределами .item

Добавить в объявление .item {}.

http://jsfiddle.net/1eg2cwLs/1/

Answer 3

Вы можете установить margin-top .item в 0, а вместо этого настроить верхний край .vcenter: before. Таким образом, вы просто корректируете текст, а не div.

Или вы можете полностью удалить статическую высоту и ширину .itemclass. Теперь класс .itemclass будет масштабироваться. http://jsfiddle.net/1eg2cwLs/5/

.item { 
    width: 100%; 
    height: auto; 
    background-color: #eeeeee; 
    border-bottom: 1px solid #cccccc; 
    overflow: hidden; 
} 
.itemclass { 
    height: 100%; 
    width: auto; 
    background-color: #27ae60; 
    vertical-align: middle; 
    text-align: center; 
    color: white; 
    font-size: 2em; 
    margin-top: 0; 
    display: inline-block; 
} 

Как запасной вариант, вы можете установить.чтобы не показывать переполнение, а затем отрегулировать высоту линии:

.item {overflow:hidden}