CSS占用剩余空间

Question

我知道有很多这样的问题。但我仍然找不到解决方案。

检查 fiddle :http://jsfiddle.net/paulocoelho/Yy9Ep/2/

所有元素占据浏览器高度的近 100%(以及顶部和底部边距)。里面有两个元素:

• 一个标题。高度可以变化(不可滚动)
• 一个灵活的区域。高度取决于父级的大小，占用剩余空间(可滚动)

如果我手动设置内容区域的高度，它会起作用，但这会破坏灵 active 。

这是CSS，其余的检查 fiddle :

.container{
    position:absolute;
    top:50px;
    bottom:10px;
    width:200px;
    background:green;
}

.flexible{
    /*This works but I need the height to be flexible depending on screen size and the natural height of the header */
    /*height:200px;*/
    overflow-y:scroll;
}

编辑:

我不希望它被 JS 控制。

Answer 1

灵活高度的最佳选择是 CSS Flexbox。

http://caniuse.com/#search=flexbox

设置主容器元素:

display: -webkit-box;
display: -moz-box;
display: box;

但是，并非所有浏览器都很好地支持它。你知道，常见的嫌疑人......

这是一篇优秀的 Mozilla 文章的链接，该文章解释了如何使用 Flexbox。

https://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

你会对 box-orient: vertical 和设置需要 flex 的子元素在 box-flex: 1

特别感兴趣

尝试使用 flexbox，它也显示 CSS:

http://flexiejs.com/playground/

这是使用 Flexbox 编辑的 jsfiddle:http://jsfiddle.net/Yy9Ep/3/

关于 Flexbox 模块状态的附加信息:

http://css-tricks.com/old-flexbox-and-new-flexbox/