Question

我正在尝试使用CSS设置max-height属性，以便我可以将最大高度设置为175像素，并且缩小窗格中不存在任何元素。

我想设置：

.prodGroup{
     max-height : 175px
}

窗格的高度减少为窗格中没有元素，但是当窗格中的元素动态增加时，其大小保持与第一次选择时相同。理想情况下，它应该增加到窗格中存在的元素的数量。

HTML

<div class="accordion" id="prodGroup">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#prodGroup" href="#prodGroup1"><i class="icon-chevron-down icon-white"></i></a>
                </div>
                <div id="prodGroup1" class="accordion-body collapse in">
                    <div class="accordion-inner">
                        <ul class="scroll-pane-mg pt-subsearch">
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li> 
                        </ul>
                    </div>
                </div>
            </div>
        </div><!-- End of Select Product Group Accordion -->

列表的代码是动态生成的，但此列表的最大大小为175px。如果内容小于175px高度但不应超过175px，则应缩小此列表。

CSS

.prodGroup ul {margin: 0px; width: 100%; overflow: scroll; height: 175px}

现在上面的列表是动态生成的，我想保持其最大高度为175px，如果内容

Answer 1

min-height

是语法所以你的代码看起来像：

.prodGroup{
    min-height: 175px;
    background-color: black;
}

或作为原始代码：

.prodGroup{
    min-height: 175px;
}

JSFIDDLE

或者这不是你的意思？

Answer 2

您在样式表中设置了一个类，而不是id

#prodGroup{
     max-height: 175px;
     overflow-y: auto;
}

很难掌握你在找什么，试着创建一个fiddle 这是我的example where I styled the id

将高度和最大高度用于具有动态大小的列表

2 个答案: