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-height和max-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 Fiddle demo

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