An app-like full screen layout in CSS

Usually mobile applications have a header and a footer, both of a fixed height, and remaining body, that fills the rest and contains entire application content. No matter if main application content is long enough to produce vertical scrollbar or not, header and footer are always visible and always have fixed height.

A layout like this can be build in pure CSS and HTML. Thus it is useful for PhoneGap applications developers.

This is a base HTML code used in discussed layout:

<div class="header row">
    This is a fixed-height header
</div>

<div class="body row scroll-y">
    This is auto-filled body
</div>

<div class="footer row">
    This is a fixed-height footer
</div>

And this is key CSS code:

.row, .col {
    overflow: hidden;
    position: absolute;
}

.row {left: 0; right: 0;}

.col {top: 0; bottom: 0;}

.scroll-x {overflow-x: auto;}

.scroll-y {overflow-y: auto;}

.header.row {
    height: 45px;
    top: 0;
    background-color: #ccc;
    padding: 7px;
    text-align: center;
}

.body.row {
    top: 45px;
    bottom: 25px;
    border: solid 3px #ccc;
}

.footer.row {
    height: 25px;
    bottom: 0;
    background-color: #ccc;
    padding: 7px;
    text-align: center
}

Notice, that top in .body.row is equal to height in .header.row and bottom in .body.row is equal to height in .footer.row. By changing these values respectively, you can modify dimensions of your layout.

This solutions is based on this Stack Overflow question and this stevensanderson.com’s blog article.