CODEWITHSUNDEEP
csslayoutmobile-browser
Ivan Velichko
Ivan Velichko

Reputation: 6709

CSS fullscreen layout with top menu and content filling remaining screen space

I want to achieve that result as my web app layout:

enter image description here

I create application for mobile usage first. I want to fixed top menu that stretch to it content and content at the bottom of this menu. Content height can be very long but I want to use overflow-y: auto;. I use CSS display: table; for container and display: table-row; for menu and content to solve this problem. JSFiddle example here.

Which pros and cons should I expect? I.e. mobile browsers interoperability, performance issues and so on.

Upvotes: 0

Views: 285

Answers (1)

btm1
btm1

Reputation: 3856

I had this exact same issue and I solved it in exactly the same way you did. The only issue I ran into was that the row on the bottom:

#content {
    display: table-row;
    height: 100%;
}

IE will not respect this and it will see height:100%; and instead of taking of the remaining space of the table like every other browser it will be equal to 100% of the entire table causing your layout to render incorrectly. The only way i found to solve this was to use a bit of jquery with a window resize function to basically only fire when it's IE and apply a pixel value height to the #content based on what it should be.

Upvotes: 1

Related Questions