We have a "heavy" page, consisting of many blocks. It is based on three blocks, three divas. The size of the bag height of these blocks must be equal to the height of the visible area.

The bottom line is that the two upper blocks should have a fixed height, and 3 blocks should expand to the accessible visible part of the screen. If the content in block 3 is greater than the height, the scroll should be on block 3, and not common to all. Tell me, please, how to do this on css?

  • what browsers need to be supported? - zhenyab
  • Wrap in parent div with min-height: 100%, all parents of this diva height: 100%. If for some reason this is not possible, then the first two are fixed / absolute, and the third is the same min-height or even 100% height + padding-top in height of the first two blocks. - etki
  • forgot to say about browsers, you need to support ie 8 - include
  • Etki, thanks, hike your way is only possible, it is a pity that it is not very clean. Well, yes, 8 should be paid for support. - include

1 answer 1

html, head { height: 100%; } div { height: 100%; overflow: auto; }

Something like this

UPD. Can so

  • then the body will have a scroll, because the third div is full height, and the first two have a fixed one, so the height of the scroll will be equal to the height of the first two blocks and when rewinding to the bottom will hide them (first two divas). - include
  • @include Updated the answer. You can still calculate the height through calc in order to do without absolutes. Then it will be height: calc (100% - 70px); // 70 - the total sum of the heights of the two blocks - inferusvv
  • Alas, ie 8 does not drag - include
  • @include if calc, then yes. And the fact that the jsfiddle - I do not know. In theory, it should) - inferusvv