javascript - css javascript 操纵 block 元素的溢出效果

Question

我有一个容器，里面有许多但可变的 block 。

#container <- overflow hidden
  .block
  .block

我需要其中一个 block 具有 overflow hidden 的高度。这个想法是，.chat div 会有一个高度， overflow hidden ，然后在里面会有一个带有 overflow auto 的 .chatlog div。

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

最明显的做法是将容器中的所有其他 block 相加，然后从容器高度中减去。但如果其他 block 加载缓慢或类似情况，这有时是不可靠的。

我可以用 CSS 做些什么来保持 .chat.block 在 View 中并占用所有未被其他 block 使用的剩余空间。

编辑:

举个例子: http://jsfiddle.net/Q923u/1/

聊天输入被隐藏，因为消息太多。我需要设置 .chat 的高度以便显示输入。

Answer 1

这个怎么样？

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

这使用的结构与您的有点不同:

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

这样我们就可以很容易地检查 .blockContainer 的高度，并将剩余的高度交给 .chat。这是通过一段简单的 jQuery 风格的 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
            });

        });

这将一个名为“refresh”的自定义事件绑定(bind)到#container 元素 - 无论何时您需要重新计算高度，您都可以像这样触发此事件:container.trigger('refresh')(或者 $('#container').trigger('refresh') 如果你没有像我一样缓存容器)。您可以在添加新的聊天或阻止元素、调整窗口大小时、AJAX 加载完成时触发 - 由您决定。

请随意从示例代码中获取您喜欢的任何内容 - 那里的样式使用“冲突的绝对位置”:有关此概念的更多信息，请参见此处:http://www.alistapart.com/articles/conflictingabsolutepositions/

CSS 不是组织得最好的，但它应该可以帮助您入门。演示页面包含一些用于添加新 block 和消息的控件，因此您可以看到布局如何对更多或更少的内容使用react。