html - 如果可能，调整 Div 纯 CSS 的大小

Question

我有以下 HTML 结构：

<div class="outer">
<div class="inner">
<a href="#"/>
<a href="#"/>
<a href="#"/>
</div>
</div>

和 CSS：

div.outer{
    position:relative;
    height:177px;
    width: 495px;
    margin: 0 10px 0 10px;
    overflow: hidden;
} 
div.inner{
    position: absolute; 

}

如何动态调整外部 div 的大小？高度最小值-最大值不起作用。谢谢 ！

Answer 1

为了让它按照我认为你希望它工作的方式工作，那么你需要使用所有三个声明：min-height,height和max-height,height是一个相对度量，min-heightandmax-height都用于将相对大小限制到适当的最小值或最大。例如：

.outer {
    overflow: auto;
    margin: 0 auto;
    width: 50%;
    border: 2px solid #000; /* The above just for aesthetics, adjust to change */
    min-height: 100px;
    height: 50%;
    max-height: 1000px;
}

JS 小提琴演示

在演示中，调整窗口大小以使“预览”窗格展开/收缩以查看效果。