0

我需要编写一个具有页眉和页脚的页面，以及介于两者之间的一些文本内容。

页面大小是固定的（一个 iframe）并且有一个固定高度的页脚，但页眉的内容可以改变（它被翻译，因此文本行数不同）。页眉和页脚都不应该有滚动条。如果它们之间的内容很长，则应在内容本身中添加滚动条。无论我做什么，我都不能让它只用 CSS 工作。我要么滚动到整个页面（或顶部区域，包括标题），要么内容 div 的文本超出了它的边界。

这是一个举例说明我的问题的小提琴：http: //goo.gl/u1iTz （我只想要绿色区域的滚动）

哦，没有 JavaScript ...... :)

谢谢。

4

1 回答 1

3

If css3 is an option, you could use FLEXBOX

FIDDLE1 and FIDDLE2

The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommandation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex"). -- from css-tricks

Markup:

<div class="container">
<header>The header text can change so the height can't be fixed. 
        Should never have a scrollbar
</header>
<div class="content">
Lorem ipsums in futurum.
</div>
<footer>
        The footer's height is fixed
</footer>
</div>

(Relevant) CSS:

.content
{
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: auto;
    height:0; /* triggers scroll */
    min-height: 0; /* triggers scroll */
}

A few points to mention:

1) I only apply flex-grow:1 (ie flex: 1 1 auto) to the scrollable content; the other items can have a fixed or dynamic height.

2) There's a hack(?) that I saw here, that placing height:0 on the container elements triggers a vertical scroll bar. (Here I used both height and min-height because this hack only worked in firefox with min-height)

3) For this to work in Firefox < 22 - you need to enable the flexbox runtime flag like this

4) Support for flexbox is surprisingly good in modern browsers (see here) but you need to add some browser specific css to get this working (see the above fiddle)

于 2013-07-14T21:34:22.273 回答