0

I previously asked the following question on stack overflow: create a scroll bar in a sidebar

here basically I am trying to create a sidebar. And in that sidebar, I want a header of unknown size and a footer of unknown size. And between the footer and header of the sidebar, I want a scrolling div containing a a long list of things. In the question above I was asking how to use css to make the scrolling div fill the space between the header and footer.

I got a lot of answers saying things like: "How can a selector know the height of another element? It is not what CSS are for."

Now my question is, why can't you do this is css? Why doesn't css allow you to set two divs to take up as much space as they need, and the div in-between fill the rest of the space? Is this not a common problem that needs to be solved?

4

3 回答 3

1

您可以在 CSS 中执行此操作，只是没有您希望的那样受支持。使用 CSScalc函数，您可以按照您描述的方式分配动态值。

您overflow: hidden将从#sidebar 中删除，并在#main 中使用calc 函数指定高度，类似于：

height: calc(100% - 30px);

最大的缺点calc是并非所有浏览器都支持，最重要的是当前稳定版本的 Chrome。但是，它在 Chrome 19 中可用（因此很快就会可用）在 webkit 前缀下。同样，它在 Firefox 上位于 moz 前缀下。IE9 也支持它。

示例：http: //jsfiddle.net/XGyHP/

于 2012-04-12T09:45:04.460 回答
0

是的，这是一个常见问题，据我所知，这在 CSS 未来版本的规范中。至于为什么会这样，我说不上来。

奇怪的是，表知道如何做到这一点（http://jsfiddle.net/45YJE/）所以可能甚至没有技术原因为什么这不应该与 div 一起使用。你只需要学会忍受它。

于 2012-04-12T09:42:35.363 回答
-1

这对你怎么样？我很确定它也适用于所有浏览器。

于 2012-04-12T14:08:16.683 回答