Title, content and footer inside div with absolute position

Question

I have a div element with an absolute position. The position value is important and cannot be changed. How to customize the header, content and footer inside this div?

The height of the header and footer is fixed, and the content should occupy all the remaining space. It is also important that the title is always at the top and bottom at the bottom.

The parent element must also be resized with a southern mutable descriptor, and the content must change its height in accordance with the height of the parent element.

.content {
    height: ?; /* What should this be?? */
}

Example situation: http://jsfiddle.net/7gPzF/26/

Answer 1

Demo

- . , .

HTML

.wrap {
  width: 100px;
  border: 1px solid black;
  position: absolute;
}

.header {
  position: absolute;
  height: auto;
  width: 100%;
  top: 0;
  border: 1px solid green;
}

.footer {
  position: absolute;
  width: 100%;
  height: auto;
  border: 1px solid green;
  bottom: 0;
}

.content {
  height: 100%;
  /* What should this be?? */
  border: 1px solid green;
  position: relative;
  top: 0;
  padding: 20px 0;
  /* padding height of header/footer */
  box-sizing: border-box;
}

<div class="wrap" id="wrap">
  <div class="content">
    <div class="header">header</div>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    text text text text
    <div class="footer">footer</div>
  </div>
</div>

Hide result

Answer 2

, , , , , ?

position absolute, bottom:0px; right:0px; left:0px;

height:auto;

: , , , .

: http://jsfiddle.net/7gPzF/42/

, .

Answer 3

jQuery .content

var heightt = $("#header").outerHeight() + $("#footer").outerHeight();
    $("#content").css("height", "calc(100% - "+ heightt + "px" ).css("position", "absolute");

: http://jsfiddle.net/yX4Py/

Answer 4

, Javascript.

:

$('#wrap .content').height($('#wrap').height() - $('#wrap .footer').outerHeight() - $('#wrap .header').outerHeight());

:

http://jsfiddle.net/7gPzF/41/