JQuery Expand Height с переполнением текста

Question

Я пытаюсь, чтобы высота div расширялась автоматически при переполнении текста. Вот my code на JSfiddle. Это не точная среда, в которой мне нужна эта функция, но это та же концепция. Мне просто нужен jQuery для правильной работы и переключения классов. Помогите оценить.

<div class="box">hello</div> 
<br> 
<div class="box">text is too long</div> 

.box { 
height: 30px; 
width: 50px; 
background: #666; 
} 
.boxfix { 
height: 60px; 
width: 50px; 
background: #666; 
} 

var heightCheck = $(".box").height(); 

if (heightCheck > 30) { 
$('.box').removeClass('box').AddClass('boxfix'); 
} 

Обновление: Я предполагаю, что не был сугубо конкретным, я прикрепил два изображения, которые показывают мою проблему. Мне не нужно просто увеличивать высоту, но также и свойство css «height-height». Вот почему я решил, что изменение класса в JQ будет работать.

Answer 1

В ответ на скрипку вы связаны в комментариях (jsfiddle.net/4nfNE/6), установить высоту и мин-высоту в одном блоке ...

color: #696969; 
height: 23px; 
line-height: 17px; 
text-transform: uppercase; 
text-decoration: none; 
display: block; 
padding-left: 6px; 
margin-bottom: 12px; 
letter-spacing:1px; 
min-height: 36px; 

Изменение «высоты» на «минимальную высоту» и удаление существующих работ «мин-высота» для скрипки.

Answer 2

Удалите код высочайшего кода jQuery и css (в этом нет необходимости) и измените height:30px; на min-height:30px;.

Работа скрипку - http://jsfiddle.net/sqGkg/

Answer 3

Для того, чтобы сделать это, вам просто нужна min-height собственность, но min-height в одиночку не будет достаточно. Чтобы быть совместимым во всех браузерах, просто используйте это.

<div class="box">hello</div> 
<br/> 
<div class="box">text is too long</div> 

.box { 
    min-height: 30px; 
    height:auto!important; /* for modern browsers */ 
    height:30px; /* for old IE */ 
    width: 50px; 
    background: #666; 
} 

Here's a fiddle.