内容：文本溢出div - overflow: auto不起作用

Question

如果你去这里，点击缩略图，然后再点标签，你就会看到我的问题。对于那些文字太长溢出的标签，它没有加入滚动条。我不能设置固定宽度，因为第一部分（标题）从一次提交到另一次提交都是不同的。

以下是应该在需要时添加滚动条的部分的CSS。

#scroll-pane{
left: -3px;
position: relative;
width: 100%;
overflow: auto;
font-family:helvetica;
font-size:11px;
color:#fff;
}

有什么想法吗？我相信这对你们来说是个简单的问题。

PeeHaa:

(function($) {
    $('#tag_info1').each(function() {
        var container = $(this);
        var total_height = container.height();
        var content_height = parseInt($('span.tag_title', container).outerHeight(true), 10) + parseInt($('span.tag_submission', container).outerHeight(true), 10);
        var p_height = 0;
        p_height+=parseInt($('span.tag_submission_text', container).css('padding-top'), 10);
        p_height+=parseInt($('span.tag_submission_text', container).css('padding-bottom'), 10);        
        p_height+=parseInt($('span.tag_submission_text', container).css('margin-top'), 10);
        p_height+=parseInt($('span.tag_submission_text', container).css('margin-bottom'), 10);  
        p_height+=parseInt($('span.tag_submission_text', container).css('borderTopWidth'), 10);
        p_height+=parseInt($('span.tag_submission_text', container).css('borderBottomWidth'), 10);

        $('span.tag_submission_text', this).height(total_height-content_height-p_height);
    });
})(jQuery);

我试图让它跟我的设备一起工作，但是没有成功 :(

- Mark Lyons

Answer 1

overflow: auto确实有效，只是它不在那里。 您已将overflow: auto;添加到段落中。

该段落不知道高度是多少。如果您将其添加到容器中，则会起作用。

或者为段落指定一个高度。

我设置了一个演示，展示如何计算剩余高度以便能够正确设置段落的高度。

- PeeHaa

---

哦，我明白了。我的想法是当段落溢出时，只为段落部分添加滚动条。这可行吗？ - Mark Lyons

@MarkLyons，就像我在问题中所述的那样，只需为该段落设置一个高度即可。 - PeeHaa

@MarkLyons既然您已经在使用JavaScript，为什么不使用JavaScript计算剩余的高度呢？ - PeeHaa

即使高度没有定义，但是由于填充和自然文本高度等原因，它也能做到这一点吗？ - Mark Lyons

让我们在聊天中继续这个讨论。点击此处进入聊天室。 - Mark Lyons

Answer 2

在Firefox上没有问题。 但是当你使用 overflow: auto; 时，你必须将其应用于容器，例如一个 div。

编辑： 好的，我理解了你的问题。 目前你在容器上使用了 height: 180px;。如果你尝试在文本容器上使用 min-height: 100px; 和 overflow: auto;，你可以修复文本容器的大小。

因此，你的文本容器将具有相同的高度，但是容器的大小可以根据标题的大小进行调整。

我不知道是否清楚，但如果你愿意，我可以再次解释一下。

- Gp2mv3

---

嘿，谢谢你的回答。我刚在Firebug中试玩了一下这个。如果您不介意，能否看一下我对PeeHaa问题的回复？ - Mark Lyons

Answer 3

我曾经遇到过一个类似的问题，当我指定了 height 和 max-height 属性时，div 元素无法出现滚动条，即使已经指定了 overflow: auto。后来我加上了 min-height 属性，问题得以解决。

- aalaap