Success:

.page {
  background-color: #8f8;
  width: 80%;
  height: auto;
}

.header {
  background-color: #fcc;
}

.content {
  background-color: #ccf; 
  overflow: auto;
  height: inherit;
}

My approach to solving this issue is as follows:

.page {
  background-color: #8f8;
  min-height: 100%;
  width: 80%;
}

.header {
  background-color: #fdc;
  overflow: hidden;
}

.content {
  background-color: #ccf; 
  overflow-y: auto;
  height: 100%;
  width: 100%;
  /*word-wrap: break-word;*/
}

Here's what I've implemented:

1. For the Page section, setting a minimum height of 100% allows it to fill up all available space rather than specifying a fixed height.
2. The Header section needs its overflow set to hidden in order to resize properly when content changes. It should also be displayed as a block element to work correctly.
3. In the Content section, the height is set to 100% to utilize all available space. Vertical scrolling will only appear when necessary and word wrapping may be enabled based on content requirements.

To prevent the page from extending beyond the bottom, consider incorporating the header within the content div. Feel free to reach out for further clarifications.

UPDATE: An example demonstrating the solution can be accessed here.

UPDATE2 An improved version of the solution can be viewed here:

.page {
  background-color: #ccf;
  max-height: 100%;
  width: 80%;
  overflow: hidden;
}

.header {
  background-color: #fdc;
  overflow: hidden;
}

.content{
  overflow-y: auto;
  height: 100%;
  word-wrap: break-word;
}

An issue with this setup is that the scroll functionality treats the entire "page" as scrollable instead of just the content area, resulting in incomplete visibility. A potential JavaScript solution is provided below:

$(window).resize(function() {
     resizeContent();
});
$(document).load(function(){
  resizeContent();
});
function resizeContent(){
  $('.content').height($(".page").height()-$('.header').height());
}

For the finalized solution, refer to this link

UPDATE: Despite the similarities in many responses, I remain firm in stating

this behavior cannot be achieved using CSS alone and without a styling issue

, and I will explain why.

The issue at hand:

• The header needs to freely adjust its height based on content changes.
• The scrollable area must be resizable and fill its entire wrapper.

A potential solution:

• Several attempts came close to solving this problem:
  • Benjamin's custom solution seems effective, but upon further testing, it reveals a flaw: resizing the container causes issues with scrollbar functionality. Test it by resizing the container and selecting text while scrolling to see the flaw where the draggable handler resets.
  • Feantury's approach is an improvement over Benjamin's, as it rectifies the previous bug. However, a new flaw arises as the draggable handler overlaps with the scrollbar down arrow.
  • Karl-André Gagnon's solution faces a similar issue to Benjamin's implementation.

In conclusion:

• JNDPNT sheds light on the situation with the statement:

  I don't think what you want is possible in css... You should look into a JS solution I'm afraid.

• Exercise caution when relying solely on CSS; unexpected challenges may arise during resizing or interactions like drag-and-drop. Many responsive designs incorporate CSS hacks or involve basic JavaScript or jQuery functionalities.
• Even in highly adaptable layouts, some reliance on JavaScript or jQuery may be necessary alongside CSS techniques.

DISCLAIMER: My intention was to assist the original poster, and I am convinced that plain CSS alone cannot achieve the desired outcome.

---

I believe achieving this without utilizing JavaScript is unlikely. Here is a jsbin demo tailored to your requirements for reference: http://jsbin.com/acirez/1.

This showcases the desired outcome:

Pro tip: Consider switching the .page and .header classes to IDs for better performance, as demonstrated by the JavaScript function:

$('div.content').height($('.page').height() - $('.header').height());

To eliminate the horizontal scrollbar, replace overflow: scroll; with overflow-y: scroll;.

Hope this information proves useful!

UPDATE: Images have been included for visual aid.

To effortlessly adjust the size of your #content, simply include these lines in your code:

  height:100px;
  overflow-y: scroll;

By setting the height to 100px, you ensure that it remains consistent. The overflow-y:scroll; property enables scrolling after reaching the specified height.

For more customization options, consider implementing both minimum and maximum heights like so:

  min-height:100px;
  max-height:600px;
  overflow-y: scroll;

In this scenario, the content will continue filling until it reaches a height of 600px, at which point scrolling will be activated with overflow-y:scroll;

//UPDATE//

To further enhance the layout, set the position of both the content and header sections to relative, and apply

height:auto; padding-bottom:50px;

to the #page element.

Ensure that the content spans the entire height of its container.

.content {height: 100%;}

It seems the desired outcome may not be achievable using just CSS. Perhaps exploring a JavaScript solution would be more practical in this case.

I have experimented with adjusting table properties to achieve a flexible header, followed by allowing content to fill up the remaining space. However, I encountered difficulty when attempting to make the overflowed text scrollable. Despite my efforts, I couldn't find a suitable solution for this issue, and it appears challenging to do so using CSS alone. If there is a solution out there that I'm unaware of, it would certainly pique my interest to discover a pure CSS approach.

Here is my progress thus far:

http://jsbin.com/abcd123

attempt

height:60px;
  overflow-y: scroll;

http://jsbin.com/ifuwaz/1/

Have you ever thought about relocating your DOM elements? If it's possible, consider moving your header into the content page. It may not be the most conventional approach, but without using JavaScript, it could be the best solution available.

To achieve this, place your header within the content and then adjust the content's min-height to 100%. This way, the content will always expand to fill its parent container, and if the text exceeds the container's size, a scroll bar will automatically appear.

For a visual demonstration, you can visit this link.

Keep in mind that the scroll bars shown there are due to the resizable feature. In your specific context, they may not be present.

To create a scrollable div, set the overflow-y property of div.content to scroll and give it a height that exceeds div.page. In this case, I have set the height to 100%. Then, hide the overflow on div.page.

.page {
  background-color: #8f8;
  height: 200px;
  width: 80%;
  overflow: hidden; 
}

.header {
  background-color: #fcc;
}

.content {
  background-color: #ccf; 
  overflow-y: scroll;
  height: 100%
}

Keep in mind that this method may cut off some content if the box is overflowing, but it's a simple solution without needing JavaScript to dynamically resize div.content.

I'm a bit unsure about your specific requirements, but here's my attempt.

http://jsbin.com/uzufir/1/edit

Unfortunately, there isn't a way to achieve full space utilization for both the Header and Content sections without setting a fixed height for the Header if JavaScript is disabled.

Here's an alternative using the Css3 Calc function:

http://jsbin.com/uzufir/2/edit

You might prefer this method, although it may not be compatible with older browsers.