No fixed height header & content fills rest of page with auto vertical overflow

Question

I have a header on my page. Its content can wrap, so it is not fixed height. The rest of the page should be filled by the content container. When there is too much content in the container it should activate vertical scroll. I tried many possibilities but always stuck in dead end (position: absolute or display: table). Now I am back to the starting point :(

Here is the starting point of my work. The green container is my page. I use JqueryUI to make it re-sizable, but I am looking for a non JS solution.

Thanks for your time & hopefully your help.

Answer 1

This works:

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

.header {
  background-color: #fcc;
}

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

Answer 2

I think it could be solved like:

.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;*/
}

Ok, what I have done:

1. Page: you can put simply height to 200px if you really know the size of the heigh, but it makes more sense to me adding min-height: 100% to make the page fill all the space.
2. Header: To allow the header resize when the content changes it is necesary setting its overflow as hidden. This will avoid for displaying any kind of scroll. Of course it must be a block element, like div or then you will have to add display:block.
3. Content: Here put the height as 100% of the space, allow the visibility of the vertical scroll only when neded and break words only if the content you will display can make the horizontal scroll to appear.

Finally, to avoid the page going off the bottom put the header as part of the content div. Ask me for more details.

UPDATE: here is the example where I have tested it.

UPDATE2 The best I have gotten is this:

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

The only problem it has is that the scroll thinks that what it is scrolling is all the "page" element not only the content, so you can not see the final arrow of the scroll. I think this could be solved by using javascript, but with css I think there is no better solution.

Javascript possible solution:

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

The link with a final solution could be found here

Answer 3

EDIT: Even if many answers are close, I still state this behavior cannot be achieved only using CSS and NOT having a styling issue and I'll explain why.

The problem:

• Having the header free to wrap it's content causing it's height to change.
• Having the scrollable area to be resizable and needing to fill all it's wrapper.

The solution:

• Many answers were close to achieve this:
  • Benjamin's fiddle looks like it works but actually it has a flaw, please test this with the provided fiddle: 1) Resize the container to make the scrollbar thumb reach half of the scrollbar track height. 2) now select some text and move your mouse down and up, to make the scrollbar move while selecting. This flaw causes the draggable handler used to resize the main area to move up.
  • Feantury answer's fiddle is in a way, better than Benjamin's because it does not have that bug, but, it still has a flaw: the draggable handler is on top of the down arrow of the scroll bar.
  • Karl-André Gagnon's fiddle has the same issue as Benjamin's.

Finally:

• JNDPNT's answer dropped some light here: I don't think what you want is possible in css... You should look into a JS solution I'm afraid.
• Please don't be too hasty in css, many things are not what they seem to be, css also has to be tested, every re-size in css is not your friend. Many styles could break when re-sizing a window or a container, dragging and dropping, etc.
• Even in highly responsive designs many of them has either a css hack, and/or at least some basic use of javascript and or jquery.

NOTE: I honestly wanted to help the OP, and I'm pretty sure this cannot be achieved with plain css.

---

I don't think it's possible w/o using any javascript, here is a jsbin I made to suit your request, please take a look at this: http://jsbin.com/acirez/1.

This is the result:

Note: Consider changing the .page and .header classes to id's instead, since the javascript does:

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

If you do not wish the horizontal bar to appear just change the overflow: scroll; for overflow-y: scroll;.

Hope it helps!

EDIT: Added images.

Answer 4

A simple solution is to add the following to your #content:

  height:100px;
  overflow-y: scroll;

this gives it a height a height which he stays. The overflow-y:scroll; makes the content scrollable after 100px;

If you want more you could give it a min and max height like this:

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

in this situation it will keep filling it till the heigh reaches 600px, and then will go in overflow-y:scroll;

//UPDATED//

put the position of the content and header to relative and apply height:auto; padding-bottom:50px; to the #page

Answer 5

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

I've tested with table-properties and getting the header flexible is easy. Getting the content to fill up the rest is easy as well... But I fail to get the remaining content scrollable when the text becomes to long. I can't find a solution for that and quite frankly I don't think one exists. Prove me wrong... It would be interesting to find a pure css solution for this :).

This is as far as I get:

http://jsbin.com/ivuvag/1/

Answer 6

Just make the content 100% the height of its parent.

.content {height: 100%;}

Answer 7

try

height:60px;
  overflow-y: scroll;

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

Answer 8

i don't know if you can move your DOM, but if you can, I suggest you put your header in the content page. This is not the most egornomic way to do it, but its the only idea i got without JS.

So, put your header in the content and then, set the content min-height to 100%. Content will alway fill its parent and if the text is longer than the container, scroll bar will apear.

Check this

Note that the scroll bar are alway there because of the resizable. In your context, it will not be there.

Answer 9

Give the div.content the overflow-y: scroll property, and a height exceeding div.page. I just made it height: 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%
}

Now this will cut off the last bit of overflow if the box is really packed, but it's the only solution I can think of without using some js to dynamically resize div.content.

Answer 10

Ok so I'm not quite sure what exactly you want, but here is a go.

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

Now there is no non-javascript way to have both the Header & The Content Fill all available space if you don't set the Header's Height to a Fixed value.

Here's a Second one Using Css3's Calc function.

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

Maybe thats more to your liking but its not supported in older browsers