css - DIV for modal display that has fixed header and footer, scrollable content, and no fixed pixel values for content height -

I have been stumped to create a Diva for a model display that has a fixed header and footer, scrollable content area , And depends on the percentage values ​​for the holder's width / height and content body only. Disclaimer: I do not know much about CSS.

Here I want to:

• Width of 65%, 60% height page,
  • Header: 100px tall, fixed position
  • Content: DIV long, fixed position, scrollable content
  • footer: 100px tall, fixed position / Ul> < P> Edit:

    Here's my attempt:

      html, mbody {overflow: auto; } #mihoulder {padding: 10px 10px 10px 10px; Width: 65%; Height: 60%; Background color: white; Status: Completed; Top: 0; Bottom: 0; Left: 0; Correct: 0; Margins: Auto; } #madders {status: Fixed; Height: 100 pixels; Left: 0; Top: 0; Width: 100%; } #mbode {width: 100%; } #mphelar {height: 100px; Width: 100%; Status: fixed; Left: 0; Bottom: 0; }   
     On this page I have this:  
      & lt; Div id = "mholder" & gt; & Lt; Div id = "mheader" & gt; Header text & lt; / Div & gt; & Lt; Div id = "mbody" & gt; Long body text ... & lt; / Div & gt; & Lt; Div id = "mfooter" & gt; Footer & lt; / Div & gt; & Lt; / Div & gt;   
     What's happening is that the header is appearing in the top-left part of my  page , not the model's display; For the lower-right footer; The modal area (which should be identified with a white background) is definitely not 65% / 60% of the page, and depending on  mbody  html  mholder  html, weird .  
     Edit:   
     
     
     I think you  
      Status: Completed;   
     For your header and your footer, instead of fixed code  is relative to the screen, when complete and relative actually end up with a non-static position Depends on the layer.  
     A Bela will be appreciated.  
     EDIT: What kind of hope do you expect? So it seems that  position: full  makes your needs suitable for the position of the header and footer.  
     So you need to do this completely for the body. But then you have to face a new problem. You wanted your headers and footers for a certain size, but want to fill the body 'rest'. I could not possibly think of a solution to do this, except that the percentage of headers and footers In height That's what I did in my Bela so I could get it the best.  
     All three elements are assigned  complete , top  top: 0; , with body  top: 10%; Footer with instructions, and  below: 0; .