Question

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

检查小提琴：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控制。

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特别感兴趣并设置需要在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/

Answer 2

我想添加

height:70%;

会做的伎俩，你可能不得不玩你想要设置的确切的amout，但猜猜它应该有效。

你可以在这里查看

fiddle

Answer 3

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

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

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

CSS占用剩余空间

3 个答案: