我正在处理一个布局,该布局放置在一个固定高度的包装器中,并包含三个内部容器。
第一个容器(标题)应该放在包装器的顶部,并且在它的高度上是灵活的。
第二个容器(内容)的高度也很灵活,如果可用空间不足(overflow-y: auto
),则需要溢出。
第三个容器(页脚)的高度也未知,需要随时放在包装器的底部。
<div id="wrapper">
<div id="header">
<span>
some unknown content that is placed at the top of the wrapper
</span>
</div>
<div id="content">
<span>
some more unknown content and within here we want
to enable vertical scrolling if necessary
</span>
</div>
<div id="footer">
<span>
again unknown content that should be placed at the bottom of
the wrapper at any time
</span>
</div>
</div>
到目前为止我已经排除了选项:
如果没有使用可能在这里工作的Javascript,还有其他选择吗?
答案 0 :(得分:1)
花了一段时间,但我相信就是这样,我根据我对另一个问题的回答进行了调整。 .inner
div必须有height:100%
,但其中的任何内容都应该可以根据需要进行修改。
.left {
border:1px solid orange;
width:200px;
height:300px;
display:table;
}
.top {
display:table-row;
}
.middle {
display:table-row;
height:100%;
}
.middle .inner {
background-color:red;
height:100%;
overflow-y:auto;
}
.bottom {
display:table-row;
}