Question

我需要撰写一个页眉，其中包含页眉和页脚，以及其间的一些文字内容。

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

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

哦，没有JavaScript ......：）

感谢。

Answer 1

如果css3是一个选项，您可以使用FLEXBOX

FIDDLE1 和 FIDDLE2

Flexbox布局（灵活盒）模块（目前是W3C候选人推荐）旨在提供一种更有效的布局方式，在容器中的项目之间对齐和分配空间，即使它们是大小是未知的和/或动态的（因此单词“flex”）。 - 来自css-tricks

标记：

<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>

（相关）CSS：

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

要提几点：

1）我只将flex-grow：1（即flex： 1 1 auto）应用于可滚动内容;其他物品可以有固定或动态的高度。

2）我看到 here 有一个hack（？），在容器元素上放置height：0会触发一个垂直滚动条。（这里我使用了高度和最小高度，因为这个hack只适用于具有最小高度的firefox）

3）为了在Firefox中工作＆lt; 22 - 您需要启用flexbox运行时标志，如 this

4）在现代浏览器中对flexbox的支持非常好（参见 here ）但你需要添加一些特定于浏览器的css才能使其工作（参见上面的小提琴）

固定页脚，更改高度标题，如何添加滚动到它们之间的内容？

1 个答案:

标记：

（相关）CSS：