0

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

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

4

3 回答 3

2

灵活高度的最佳选择是 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/

于 2013-03-07T04:18:45.643 回答
0

我认为添加

height:70%;

会做的伎俩，你可能不得不玩弄你想要设置的确切数量，但猜测它应该可以工作。

你可以在这里查看

小提琴

于 2013-03-07T04:23:25.763 回答
0

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

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

<div style"position:fixed; bottom:0;">
于 2013-03-07T04:26:55.610 回答