我有几个 DIV 元素结构,一个位于另一个之下。
<div id="app">
<div id="title">Title</div>
<div id="block1">Block 1</div>
<div id="block2">Block 2</div>
<div id="content">CONTENT</div>
</div>
#title
,#block1
并且#block2
具有固定的高度,我希望该内容将占用 100% 的可用空间,并且overflow-y: auto
当其内容不适合时也会有滚动条。
我该怎么做?我已经阅读了有关使内容绝对定位并将其底部设置为 0px 并将其顶部设置为其他 DIV 高度摘要的想法。但是我可以在内容块上有更多的 DIV 元素,并且不想一直更改它的 CSS。
我还设置了:
html, body, #app {
height: 100%
}
但是当我设置#content
为 100% 高度时,它会越过屏幕底部,这不是我需要的。我希望这#app
将是 100% 的高度,并且#content
如果需要的话,可以显示滚动条。
这是 jsFiddle - http://jsfiddle.net/ZNFcd/
有什么帮助吗?由于它的 Intranet 应用程序因此只适用于 chrome + CSS3 解决方案的解决方案也受到欢迎。
谢谢你。