Question

This question would have been a duplicate of header and footer fixed, content scrollable and Fixed header, footer with scrollable content if not for one detail, which is very important for me – I do not want to specify a fixed height and width for the content.

http://jsfiddle.net/mark69_fnd/PWRDa/ contains a real form with dummy data, demonstrating the problem – resizing the window makes the scrollbars appear, but on the page, rather than on the form. In the current layout the menubar and the statusbar are scrolled out of view and I want them to remain fixed, while the form data gets scrolled.

Please, do not provide a solution with absolute width and/or height. I prefer calculating them in javascript, rather than baking them into the CSS, unless it is 100%. Of course, pure HTML/CSS solution is preferable.

Here is the CSS:

html, body, .yui3-app-views {
    height: 100%;
    width: 100%;
}

.container {
    position: relative; /* needed for footer positioning*/
    margin: 0 auto;
    height: auto;
    min-height: 100%;
    background-color: #eee;
}

.content {
    background-color: #ddd;
    padding: 0em 0em 2em; /* bottom padding for footer */
    overflow: auto;
}

#footer {
    position: absolute;
    width: 100%;
    bottom: 0; /* stick to bottom */
    background-color: #ccc;
}

#status {
    border: solid 1px #000000;
}

#status .error {
    color: red;
    font-weight: bold;
}

/* ------------------------------------------------------------------------------------*/
.char {
    display: inline-block;
    vertical-align: top;
}

.line {
    white-space: nowrap;
}

/* --------------------------------- fieldset and legend ------------------------------*/
.fieldset {
    border: 2px groove threedface;
    margin-top: 1em;
}

.fakeFieldset {
    padding: 2px;
}

.fieldset > div.legend:first-child {
    display: inline-block;
    text-align: left;
    margin-left: 10px;
    background: #ddd;
    position: relative;
    top: -0.7em;
}

.merge-bottom {
    margin-bottom: -2px;
}

/* ------------------------------------ Forms ------------------------------*/

form div {
    white-space: nowrap;
}

form select, form input {
    margin: 2px;
    border: 1px groove;
}

form label:not(.same-line) {
    width: 8em;
    text-align: right;
    display: inline-block
}

#cust-balance {
    text-align: center;
}

.ccExpDate {
    width: 2em;
}

#cust-salutation {
    width: 4em;
}

.postalCode {
    width: 7em;
}

#cust-ccAddress {
    width: 20em;
}
​

Answer 1

// Updated with input from asker.

This works great. Mine have widths set to 100%, but of course you can do that in JS if you want.

You need to give the header and the footer position:fixed

I also put some padding in the .content div to make room for the top header.

Like the following:

html, body, .yui3-app-views {
    height: 100%;
    width: 100%;
}

.content {
    background-color: #ddd;
    padding: 2em 0em; /* padding for footer and header */
}

.menubar {
     position: fixed;
     top: 0px;
     width: 100%;
     z-index:1;
}

#footer {
    position: fixed;
    width: 100%;
    bottom: 0; /* stick to bottom */
    background-color: #ccc;
}