CSS 占用剩余空间答案

【问题标题】：CSS occupy the remaining spaceCSS 占用剩余空间
【发布时间】：2013-02-22 03:58:09
【问题描述】：

我知道有很多这样的问题。但我还是找不到解决办法。

检查小提琴：http://jsfiddle.net/paulocoelho/Yy9Ep/2/

所有元素几乎占据了浏览器高度的 100%（连同顶部和底部边距）。里面我有两个元素：

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

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

这里是 CSS，其余的检查小提琴：

.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 控制。

【问题讨论】：

这个概念并不是 CSS 原生的。通过 JS 处理起来要容易得多。

标签： css scroll position alignment

【解决方案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 并将需要伸缩的子元素设置为 box-flex: 1

尝试使用 flexbox，它也会显示 CSS：

http://flexiejs.com/playground/

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

有关弹性盒模块状态的其他信息：

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

【讨论】：

我不知道display: box！好资料！
好吧，一旦这变得更加标准，它将帮助很多。 W3C 只是将其草拟为候选推荐。不幸的是，它还没有得到很好的支持......但是。
不客气。让我们希望互联网的黑暗时代将成为历史，有朝一日，作为开发人员/设计师梦想画布的网络将在不久的将来成为现实。

【解决方案2】：

CSS3 标准没有提供一种可靠的方法来填充父元素的高度。使用 height:100% 通常作为一种解决方案提供，但同样，各种浏览器并不一致支持。无论如何，现在通常认为这样做已经过去了。

如果您只是想将块元素锚定到页面或容器的底部并在中心滚动区域：

<div style"position:fixed; bottom:0;">

【讨论】：

【解决方案3】：

我想添加

height:70%;

可以解决问题，您可能需要使用您想要设置的确切数量，但猜测它应该可以工作。

你可以在这里查看

fiddle

【讨论】：

这是一个很好的尝试，但是如果你改变小提琴视口（或页面）的高度，灵活的div下面总是有一个空间。