Динамическая высота для DIV

У меня есть следующий DIV

<div id="products">

</div>

#products
{
    height: 102px; width: 84%;
    padding:5px; margin-bottom:8px;
    border: 1px solid #EFEFEF;
}

Теперь внутри DIV я динамически генерирую 4 ссылки. Но иногда может быть больше или меньше 4 ссылок. Как изменить CSS для динамического изменения размера DIV в соответствии с его содержимым?

Ответы

Ответ 1

set height: auto; Если вы хотите иметь минимальную высоту до x, вы можете написать

height:auto;
min-height:30px;
height:auto !important;        /* for IE as it does not support min-height */
height:30px;                   /* for IE as it does not support min-height */

Ответ 2

Это работало для меня как HTML -

    <div style="background-color: #535; width: 100%; height: 80px;">
        <div class="center">
            Test <br>
            kumar adnioas<br>
            sanjay<br>
            1990
        </div>
    </div>

CSS-

.center {
    position: relative;
    left: 50%;
    top: 50%;
    height: 82%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
   }

Надеюсь, вам тоже помогут.

Ответ 3

Вы должны быть в порядке, чтобы просто взять свойство height из CSS.

Ответ 4

Установите для параметра auto:

height: auto;
width: auto;

Создание:

#products
{
    height: auto;
    width: auto;
    padding:5px; margin-bottom:8px;
    border: 1px solid #EFEFEF;
}

Ответ 5

вычислить высоту каждой ссылки, не делайте этого

document.getElementById("products").style.height= height_of_each_link* no_of_link

Ответ 6

как и предыдущие, удалить атрибут height. если вам нужно ваше расширение вместе с его минимальной высотой, используйте min-height: 102px вместо height: 102px.

note ie 6 и min-height http://www.dustindiaz.com/min-height-fast-hack/