4

我想在另一个包装器内有一个动态高度 div，它总是填充父容器，并通过显示垂直滚动条来自动缩小它的大小，以便用户在发生溢出时滚动。

下面的插图是我所期待的：

CSS

目前，内容窗格刚刚溢出包装器并将页脚窗格也推到了视线之外。

在这里摆弄 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可以做到这一点吗？

(** 更新:) 我不希望我的包装器有任何滚动条，并且包装器必须是固定大小，希望这很清楚 - 谢谢 :)

4

4 回答 4

5

据我所知，这只能通过 Flexbox 完成。

小提琴

（相关）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（？） ，将 height:0 放在容器元素上会触发垂直滚动条。（这里我同时使用了 height 和 min-height 因为这个 hack 只在具有 min-height 的 Firefox 中有效）

3) 为了在 Firefox < 22 中工作 - 你需要像这样启用 flexbox 运行时标志

4) 在现代浏览器中对 flexbox 的支持出奇的好（见这里），但是你需要添加一些特定于浏览器的 css 才能让它工作（见上面的小提琴）

于 2013-08-15T11:03:35.900 回答
1

我相信这就是你所追求的结构。您当然必须根据您的特定尺寸要求对其进行修改。

小提琴

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content"></div>
    <div id="footer">Footer</div>    
</div>

CSS

#wrapper{
position: relative;
background: #f5f5f5;
height: 400px;
margin: 0;
padding:  10px;
}

#header, #footer{
    position: absolute;
    background: #000;
    color: #fff;
    height: 20px;
    width: 100%;
    margin-left: -10px;
}

#header{
    top: 0;
}

#footer{
    bottom: 0;
}

#content{
    position: absolute;
    top: 20px;
    bottom: 20px;
    overflow: auto;
    width: 100%;
    margin-left: -10px;
}
于 2013-08-15T10:42:14.197 回答
0

我看不到您的图像（被防火墙阻止），但是按照您的描述，您可以执行以下操作：

#dynamic{
   position: absolute;
   width: 100%;
   top: 0;
   bottom: 0;
   overflow: auto;
}

#wrapper {
   position: relative;
}

通过将和属性position: absolute都设置并设置为 0，您将强制它占据. 您还告诉它，如果它的大小小于它的内容，那么让它溢出可滚动。topbottomoffsetParent

显然，这带来了它自己的问题，因为元素必须绝对定位并从常规文档流中取出。您很可能需要进行一些重组。

于 2013-08-15T10:51:53.407 回答
0

试试这种风格。这将产生类似于您的第二张图像的结果。我不确定您的第一个结果，完全是在 CSS 中完成的。

body,html
{
    height: 97%;
}

#wrapper
{
    padding: 1%;   
    vertical-align: middle;
    background-color: cyan;
    height: 100%;   
}

#expand{
    background-color: yellow;

}

#dynamic{
    background-color: green;
    position : relative;
    height : 50%;
    overflow-y: scroll;
    overflow-x:hidden;
}

#header,#footer
{
    background-color: purple;
    height: 7%;
}

#content
{
    height: 86%;
}
于 2013-08-15T11:21:10.563 回答