css javascript操作块元素的溢出效果答案

【问题标题】：css javascript manipulate overflow effects for the block elementcss javascript操作块元素的溢出效果
【发布时间】：2011-06-14 17:02:28
【问题描述】：

我有一个容器，里面有很多但可变的块。

#container <- overflow hidden
  .block
  .block

我需要其中一个块具有隐藏溢出的高度。这个想法是，.chat div 会有一个高度，隐藏溢出，然后在里面会有一个带有溢出自动的 .chatlog div。

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

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

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

编辑：

这是一个例子： http://jsfiddle.net/Q923u/1/

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

【问题讨论】：

已经阅读了您的问题几次，但仍然无法理解您到底想要什么。也许只有我一个人，但示例 html 标记可能会有所帮助。
@Niklas 我用 jsfiddle 更新了我的问题
所以你想要this但不做JS计算？

标签： javascript jquery css

【解决方案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”的自定义事件绑定到#container 元素 - 每当您需要重新计算高度时，您可以像这样触发此事件：container.trigger('refresh')（或$('#container').trigger('refresh')，如果您没有像我一样缓存的容器）。每当添加新的聊天或阻止项目、调整窗口大小、AJAX 加载完成时，您都可以触发 - 这取决于您。

随意从示例代码中获取任何你喜欢的东西 - 那里的样式使用“冲突的绝对位置”：更多关于这个概念的信息：http://www.alistapart.com/articles/conflictingabsolutepositions/

CSS 不是最有条理的，但它应该可以帮助您入门。演示页面包含一些用于添加新块和消息的控件，因此您可以看到布局如何对或多或少的内容做出反应。

【讨论】：

谢谢，很棒的演示。我会更仔细地研究这个。绝对位置确实很有趣，但放弃了很多灵活性。
很多人都有这样的印象，因为 position:absolute 传统上被使用的方式，但我没有发现这种技术是这样的。查看列表分离文章 - 像这样使用，它实际上只是一种为框的边缘（顶部、右侧、底部、左侧）提供 4 个坐标并保持宽度和高度流动的方法。它与 position:absolute 的早期没有太多共同之处。
再考虑一下这个答案，我不确定为什么在任何情况下都需要绝对位置。这个答案类似于问题中提出的“最明显的事情是将容器中的所有其他块相加并从容器高度中减去”解决方案，只是你正在使用 blockContainer.height() 而不是而不是将所有其他块相加。只要我们在加载其他块后调整大小，不使用绝对会产生相同的结果
确实如此 - 您可以设置块的高度，而不是 'top' 属性。就个人而言，我喜欢“顶部”，因为它赋予了方块重要的位置坐标，而不是“高度”，最终将顶部放在正确的坐标上。它没有任何实际区别，只是感觉对我来说更直接。
OK 时间到了，您是第一个提议调整大小事件的人。感谢您的帮助。

【解决方案2】：

也许我没有正确理解，但你不能将聊天高度设置为 100% 以填充外部容器的其余部分吗？像这样jsfiddle？

【讨论】：

这就是我想要的，我不明白你是怎么做到的 0.o jsfiddle.net/Q923u/2 我试图将高度 100% 放在我的示例中，但没有成功。你能用我的例子试试吗
@Mark，pthurlow 方法的一个潜在问题是聊天 div 超出了容器的边界。因为您正在使用边距，所以这种方法会弄乱您的边界。如果我是你，我只会给聊天 div 一个高度并删除聊天日志 div。 Here's a jsfiddle.
@squidbe 问题是如何确定聊天的高度。找个万无一失的方案，JS就OK了。马林斯不是那么重要，没有边距也可以
我认为这更符合您的要求，对吧？ jsfiddle.net/Q923u/5
是的，但我需要将容器溢出隐藏，因为自动会创建 2 个滚动条。

【解决方案3】：

你可能想玩转 position: absolute;和底部：0。可能有一种方法可以让它做你想做的事，而不使用 JS。看看这些：

我为你制作的 JSFiddle http://jsfiddle.net/bT9kY/
另一个堆栈溢出问题 CSS: Make one central div's height expand to fill what's left in a FIXED-HEIGHT container

【讨论】：

如果块有边距怎么办？那么绝对解决方案就行不通了

【解决方案4】：

引起我注意的是：

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

为什么？为什么块加载缓慢？为什么你不知道何时加载块？确定几个 HTML 元素的高度很简单。看来您的问题是时间问题。确保您的引导程序或初始化程序有一个在加载所有块时触发的事件，然后调整大小（或在每个块加载后进行，以用户更喜欢的为准）。

【讨论】：

你是对的，这是一种解决方案，在所有内容加载后触发调整大小。我希望有一个可能更容易概括的解决方案，但这也可以

【解决方案5】：

这里有一个解决方案，通过 jQuery。不过，您可能需要在每次内容更新时运行该功能。 [参见小提琴中的示例] 可能不是您想要的，但很容易获得您需要的高度，而无需遍历显示中的所有项目并计算其长度。通过获取其相对“位置值”，您可能需要更改示例中的“id”/“类”以进行部署。

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

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

还需要编辑您的 css，并且默认效果相同（但您无法进行调整 =/）

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

最终结果： http://jsfiddle.net/ubGnM/

【讨论】：

【解决方案6】：

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

你不能把你的聊天框放在另一个 div 元素中，然后根据需要自动滚动文本内容。

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

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

示例...

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

【讨论】：

【解决方案7】：

如何将 max-height 添加到您的 .chatlog

 max-height: 5em;

看：http://jsfiddle.net/LAgng/

【讨论】：

问题是如何找到需要设置的高度