CODEWITHSUNDEEP
htmlcss
goerwin
goerwin

Reputation: 1241

Vertical Fixed and fluid layout with no browser scrollbar

enter image description here

I wanted my page to have a behavior like in the image. The 100% box has the height of the browser screen and the auto box has a min-height, let's say 100px, so, what I like is to the auto box to increase/decrease and if its height is lower than 100px, then create the scroll bar IN the auto box and NOT the browser (as in the image).

EDIT: http://jsfiddle.net/erwingo/gMEBn/ The problem is that when you resize down the windows, the scroll bar appears because the --div class="content"-- doesn't seem to decrease.

Sorry if my english is not good enough.

Upvotes: 0

Views: 805

Answers (1)

PCasagrande
PCasagrande

Reputation: 5402

You can specify the height of the elements in percentages of the screen. Then give your content area overflow: auto;

Another option, since the heights on your headers and footer seem to be static is to set the content to be position:absolute; top: totalOfHeadersHeight; bottom: footerHeight; overflow: auto; It will then give you the content area as filling the screen with it's own separate scroll area.

Upvotes: 1

Related Questions