Question

I have a container with numerous but variable blocks in it.

#container <- overflow hidden
  .block
  .block

I need one of those blocks to have a height with overflow hidden. The idea is, the .chat div would have a height, with overflow hidden and then inside that there would be a .chatlog div with overflow auto.

#container <- overflow hidden
  .block
  .block
  .chat.block <- need a overflow hidden
    .chatlog <- need a overflow auto
      .chatmsg
      .chatmsg
      .chatmsg
    .chatentry

The most obvious thing to do is to add up all the other blocks in the container and substract that from the container height. But that’s sometimes unreliable if the other blocks load slowly or some such.

Is there something I can do with CSS that would keep the .chat.block in view and taking up all the remaining space not used by the other blocks.

Edit:

Here’s an example:
http://jsfiddle.net/Q923u/1/

The chat input is hidden because there are too many messages. I need to set the height of the .chat so that the input is shown.

Answer 1

How’s this?

http://www.spookandpuff.com/examples/chatView.html

This uses a structure a little different to yours:

#container
    .blockContainer
        .block
        .block
        .block
    .chat
        .chatlog
            .msg
            .msg
            .msg
        .chatentry

This is so we can easily check the height of .blockContainer, and give the remaining height to .chat. This is done with a simple piece of jQuery-flavoured javascript:

//Cache the important elements to avoid looking them up when we refresh:
        var container = $('#container'),
            blockContainer = container.find('.blockContainer'),
            chatContainer = container.find('.chat'),
            chatLog = chatContainer.find('.chatlog');

        container.bind('refresh', function(){
            //Determine the height of .blockContainer, and give .chat the leftovers
            chatContainer.css('top', function(){
                return blockContainer.height(); //The 'top' property of the chat corresponds to the bottom of the block container
            });

        });

This binds a custom event called ‘refresh’ to the #container element – whenever you need the heights to be re-calculated, you trigger this event like so: container.trigger('refresh') (or $('#container').trigger('refresh') if you don’t have the container cached like I have). You can trigger whenever a new chat or block item is added, when the window is resized, when an AJAX load finishes – it’s up to you.

Feel free to take whatever you like from the example code – the styles there use ‘conflicting absolute positions’: more on the concept here: http://www.alistapart.com/articles/conflictingabsolutepositions/

The CSS is not the most well-organised, but it should get you started. The demo page includes some controls for adding new blocks and messages, so you can see how the layout reacts to more or less content.