css javascript manipulate overflow effects for the block element_问答_开发者

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.

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.

maybe im not understanding correctly, but couldn't you set the chat height to 100% to fill the rest of the outer container? something like this jsfiddle?

You might want to play around with position: absolute; and bottom: 0. There's probably a way to get it to do what you want, without using JS. Check out these:

a JSFiddle I made for you http://jsfiddle.net/bT9kY/
Another Stack Overflow question CSS: Make one central div's height expand to fill what's left in a FIXED-HEIGHT container

What caught my attention was this:

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.

Why? Why are blocks loading slowly? Why don't you know when blocks are loaded? It's simple enough to determine the height of a few HTML elements. It seems like your problem is timing. Make sure your bootstrapper or initializer has an event that fires when all blocks have been loaded, THEN do the resizing (or do it after each block has loaded, whichever is more pleasant for the user).

Here a solution, via jQuery. You may need to run the function each time on content update though. [See example in fiddle] May not be what you wanted, but it easy to get the height you needed, without going through all the items in the display and calculating its length. by getting its relative 'position value' You may need to change the 'id' / 'class' in the example for your deployment though.

$(document).ready(
    updateBlock();
);

function updateBlock( container, lastChild ) {
    $("container").height = $(".chat").position().top + $(".chat").height;
}

Also editing your css is required, and would default to the same effect (but you cant do adjustment then =/ )

#container {
 background: #ccc;
 width: 200px;
 overflow: hidden;
 //Remove height parameter
}

Final result: http://jsfiddle.net/ubGnM/

#container
    .blockContainer
        .block
        .block
        .block
    .chatlog //Overflow auto
        .msg
        .msg
        .msg
    .block
        .chatentry

Cant you just place your chat box in another div element, then auto scroll the text content as needed.

function scrollDown(container) {
    container.scrollTop = container.scrollHeight;
}

$(document).ready( function() {
scrollDown(document.getElementById('toScroll')); 
    }
);

Example...

http://jsfiddle.net/zV2Bv/3/

how about adding max-height to your .chatlog