固定页脚，改变页眉高度，如何添加滚动到它们之间的内容？ [英] Fixed footer, changing-height header, how to add scroll to the content between them?

问题描述

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

这里有一个小例子来举例说明我的问题：
http://goo.gl/u1iTz
（我要滚动只有绿色区域）

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

谢谢。

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

FIDDLE1 和 FIDDLE2

Flexbox Layout（Flexible Box）模块（目前为W3C Candidate
推荐）旨在提供更有效的布局方式，
在容器中的项目之间对齐和分配空间，即使它们的
大小是未知的和/或动态的（因此单词flex）。 - 从 css-tricks

标记：

 < div class =container> 
< header>标题文本可以更改，因此高度不能修复。 
不应该有滚动条
< / header> 
< div class =content>未来的
 Lorem ipsums。 
< / div> 
< footer> 
页脚的高度固定为
< / footer> 
< / div> 
  

（相关）CSS：

<$ p $ .content
{
-webkit-flex：1 1 auto;
flex：1 1 auto;
溢出：auto;
height：0; / *触发滚动* /
最小高度：0; / *触发滚动* /
}


需要提及的几点：
$ b 1）我只将flex-grow：1（即flex： 1 1 auto）应用于可滚动内容;其他项目可以有一个固定的或动态的高度。

2）我看到了一个黑客（？） here ，即在容器元素上放置height：0会触发垂直滚动条。 （在这里，我使用了高度和最小高度，因为这个黑客只能在最小高度的firefox中工作）

3）为了在Firefox中工作< 22 - 您需要启用Flexbox运行时标志，如 此

4）在现代浏览器中支持flexbox非常好（请参阅 here ），但你需要添加一些浏览器特定的CSS来得到这个工作（见上面的小提琴）

I need to compose a page which has a header and a footer, and some textual content in between.

The page size is fixed (an iframe) and has a fixed-height footer, but the header's content can change (it's translated thus the number of text lines varies). Both header and footer should never have a scrollbar. If the content between them is long, a scrollbar should be added to the content itself. Whatever I do, I can't get this to work CSS-only. I either have a scroll to the entire page (or the top area, including the header), or the content div's text extends beyond it's borders.

Here's a fiddle to exemplify my problem: http://goo.gl/u1iTz (I want a scroll for the green area only)

Oh, and without JavaScript... :)

Thanks.

解决方案

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)

这篇关于固定页脚，改变页眉高度，如何添加滚动到它们之间的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！