Question

我有以下DIV

<div id="products">

</div>

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

现在在DIV中，我正在动态生成4个链接。但有时可能会有多于或少于4个链接。如何更改CSS以根据其内容动态调整DIV的大小？

Answer 1

设置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 */

Answer 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%);
   }

希望也会帮助你。

Answer 3

你应该可以从CSS中取出height属性。

Answer 4

将两者都设为auto：

height: auto;
width: auto;

成功：

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

Answer 5

计算每个链接的高度不做这个

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

Answer 6

作为先前的，删除高度属性。如果您希望扩展及其最小高度，请使用min-height: 102px代替height: 102px.

注意即6和最小高度http://www.dustindiaz.com/min-height-fast-hack/

DIV的动态高度

6 个答案: