css – 没有溢出父容器的动态高度DIV

2023年1月16日 205次阅读

我希望在另一个包装器中有一个动态高度div,它总是填充父容器,并自动缩小其大小,显示一个垂直滚动条,供用户滚动,如果发生溢出.

以下插图是我所期待的：

目前,内容窗格只是溢出包装器并推出页脚窗格也不在视线范围内.

这里小提琴http://jsfiddle.net/WWcAz/1/

#wrapper{
    padding: 10px;   
    vertical-align: middle;
    background-color: cyan;
    min-height: 100px;
    height: 300px;
    max-height: 300px;    
}

#dynamic{
    background-color: green;
    overflow: auto;
    overflow-x: hidden;
    min-height: 40px;
}

纯CSS可以实现吗？

(**更新:)
我不希望任何滚动条与我的包装,包装必须修复大小,希望这是明确的 – 谢谢:)

最佳答案 据我所知,这只能用Flexbox完成.

FIDDLE

(相关)CSS

#wrapper{
    padding: 10px;   
    vertical-align: middle;
    background-color: cyan;
    min-height: 100px;
    max-height: 300px; 
    -ms-box-orient: vertical;
   display: -ms-flex;
   height: 100%;
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-flex; 
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21+ */ 
   display: flex;          /* NEW: Opera 12.1, Firefox 22+ */    

   -ms-flex-direction: column; 
   -webkit-flex-direction: column;
   flex-direction: column;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#content
{
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: auto;
    height:0;
    min-height: 0;
}

有几点需要提及：

0)(编辑:)为了仅在(绿色)内容上获得滚动,我必须稍微改变标记以将黄色区域放在标题中.

1)我只将flex-grow：1(即flex：1 1 auto)应用于可滚动内容;其他物品可以具有固定或动态高度.

2)我看到了一个hack(？)here,在容器元素上放置高度：0会触发垂直滚动条. (这里我使用了高度和最小高度,因为这个hack只适用于具有最小高度的firefox)

3)为了在Firefox中工作< 22 – 您需要启用flexbox运行时标志,如this

4)在现代浏览器中支持flexbox令人惊讶的好(见here),但你需要添加一些特定于浏览器的css来实现这一点(参见上面的小提琴)

点赞