vendredi 27 février 2015

Scrollable 100% height main panel with fixed header and optional breadcrumbs

I have a difficult CSS problem to solve. I have an app that always has a header at the top of the page - say 75px in height. On most pages, there will be breadcrumbs too - 45px in height. Of course, the home page has no need to show the breadcrumbs, so the header will occupy less total height than other pages.


What I'd like to do is have the main view under the breadcrumbs occupy the rest of the space on the screen - for all device heights. Moreover, I want this pane to be scrollable, while the header/breadcrumbs are always on top.


This seems to be very tricky to do.


Here is an example describing what I mean:


enter image description here


Aucun commentaire:

Enregistrer un commentaire