title: How can I make the content scrollable, but not the header and neither the footer?
body: <p>This question would have been a duplicate of <a href="https://stackoverflow.com/questions/4204517/header-and-footer-fixed-content-scrollable">header and footer fixed, content scrollable</a> and <a href="https://stackoverflow.com/questions/4069734/cross-browser-fixed-header-footer-and-scrollable-content">Fixed header, footer with scrollable content</a> 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. </p>
  
  <p><a href="http://jsfiddle.net/mark69_fnd/PWRDa/" rel="nofollow noreferrer">http://jsfiddle.net/mark69_fnd/PWRDa/</a> 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.</p>
  
  <p>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.</p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>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 &gt; 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;
  }
  ​
  </code></pre>