0

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;
}
​

1 Answer 1

2

// 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;
}
4
  • As it turns out, even less changes were needed, because neither overflow:none; nor overflow: scroll-y; are valid CSS and thus can be safely removed. Also, I found out than adding z-index:1; to the menubar fixes the fieldset legend passing over it when scrolled. But other than that, you really did it.
    – mark
    Oct 29, 2012 at 10:16
  • True, overflow: none; is not a valid property. It's actually overflow: hidden; I will update my answer. overflow:scroll-y; is not valid css 2.1, however it is css3. Glad this helped you.
    – apttap
    Oct 29, 2012 at 14:24
  • Could you show me how to eliminate the redundant vertical scrollbar? I have reduced the size of the form, but it still shows - jsfiddle.net/mark69_fnd/PWRDa
    – mark
    Oct 30, 2012 at 0:05
  • Never mind, I think I've got it - the padding for the header and the footer should be on the content, rather than on the container - jsfiddle.net/mark69_fnd/PWRDa/26.
    – mark
    Oct 30, 2012 at 1:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.