Vertical layout with middle box scrollable (not position: absolute)

Question

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)

enter image description here

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

This question may be of interest, but Flexbox requires IE10+: http://stackoverflow.com/questions/14962468/flexbox-and-vertical-scroll-in-a-full-height-app-using-newer-flexbox-api. You'll get exactly what you want in most browsers if you can live without scrolling in those that don't support it. — cimmanon, Apr 23 '13 at 12:23
Yeah, it would be simple if you could have [a fixed height of header](http://pastebin.com/z08LjVLh) via absolute position, but now it is quite a riddle.... — Stano, Apr 23 '13 at 19:32

score 0 · Answer 1 · answered Apr 23 '13 at 11:45

0

You want overflow-y: scroll.

Working example:

Demo

answered Apr 23 '13 at 11:45

Alp

29,274
27
120
198

Does not work on FF :( On IE9 it expands down when header wraps :( – Saram Apr 23 '13 at 11:50
Cannot confirm that: It's working here on FF ESR 10.0.11 and FF ESR 17.0.4 and IE 9.0.8112.16421 (Windows 7 64-Bit) – Alp Apr 23 '13 at 11:55
I added picture to my post. – Saram Apr 23 '13 at 12:56

Pramod Bhoi · Answer 2 · 2013-04-24T10:01:56.827

0

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

edited Apr 24 '13 at 10:01

answered Apr 23 '13 at 12:25

Pramod Bhoi

197
1
7

In you example layout height is not preserved. – Saram Apr 25 '13 at 05:54

Vertical layout with middle box scrollable (not position: absolute)

2 Answers2

Demo

Linked