[英]Dynamic height DIV without overflowing parent container
我想在另一个包装中放置一个动态的高度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完成。
#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,因为此技巧仅在具有min-height的Firefox中起作用)
3)为了在Firefox <22中工作,您需要启用flexbox运行时标志,如下所示
4)在现代浏览器中,对flexbox的支持出奇的出色(请参阅此处 ),但是您需要添加一些特定于浏览器的CSS才能使它正常工作(请参见上面的小提琴)
我相信这是您所追求的结构。 当然,您将必须根据您的特定大小要求对其进行修改。
的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;
}
试试这种风格。 这将产生类似于您的第二张图像的结果。 我不确定您的第一个结果是完全在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%;
}
我看不到您的图像(被防火墙阻止),但是按照您的描述可以执行以下操作:
#dynamic{
position: absolute;
width: 100%;
top: 0;
bottom: 0;
overflow: auto;
}
#wrapper {
position: relative;
}
通过设置position: absolute
并将top
和bottom
属性都设置为0,您将迫使它占据offsetParent
的高度。 您还告诉它,如果它的大小小于其内容,则使其溢出可滚动。
显然,这带来了它自己的问题,因为必须将元素绝对定位并从常规文档流中删除。 您很可能需要进行一些重组。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.