中间框可滚动的垂直布局（不是位置：绝对） [英] Vertical layout with middle box scrollable (not position: absolute)

问题描述

我需要一些看起来很常见的东西：

  + ----------- + 
 |标题| 
 + ----------- + 
 | ^ | 
 | || 
 |滚动|| 
 | || 
 | v | 
 + ----------- + 
 |页脚| 
 + ----------- + 
  

但问题是，我的头可以包裹，所以它的高度可以改变。所以我不能使用 position：absolute 布局页面和其他头部大小固定且已知的 。我使用 display：table 解决方案 >，但每个浏览器看起来都不一样，只能在Chrome中按预期工作。





为了适应FF和IE9，我需要做些什么？

链接（仅限在chrome中使用）

订单：FF，IE，Chrome（ok）

解决方案

添加overflow-y：滚动到您的内容div滚动和最大高度为标题。这可能有助于您的查询：
请参阅此处： 小提琴

  .header {
最大高度：100px; 
} 
 .content {
 height：400px; 
 background-color：yellow; 
 overflow-y：scroll; 
} 
  

I need something looking very common:

+-----------+
|  Header   |
+-----------+
|          ^|
|          ||
|  Scroll  ||
|          ||
|          v|
+-----------+
|  Footer   |
+-----------+

But the problem is, that my header can wrap, and so its height can change. So I can not use position: absolute to layout page and any other where header size is fixed and known a priori. I designed one solution using display: table, but it looks different in every browser, and only works as expected in Chrome.

What would I need to do to adapt this for FF and IE9?

link (working in chrome only)

Here is picture in order: FF, IE, Chrome (ok)

My version: FF (20.0.1), IE (9.0.8112.16421 64bit), Chrome (26.0.1410.64 m)

解决方案

Add overflow-y:scroll to your content div for scroll and max-height to header. This may be help to your query: see here: fiddle

.header{
    max-height: 100px;
}
.content {
  height: 400px;
  background-color: yellow;
  overflow-y: scroll;
}

这篇关于中间框可滚动的垂直布局（不是位置：绝对）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！