jquery - Div 内容溢出问题

Question

我已经阅读了很多关于这个主题的帖子，但其他人都遇到了水平溢出问题，而我的是垂直溢出问题， float 、清除和溢出参数设置等解决方案似乎不起作用。这是代码:

HTML:

        <div style="padding:25px">
                              <? $pieces = explode("|",$row['comments']); foreach ($pieces as $comment) { $comment = explode("~",$comment); ?>
                                <div class="commentdiv" style="padding:10px;border-radius: 5px; position:relative; float:left; width:100%; margin-bottom:25px; background-color:#FFF;"> 
                                    <div class="commentcover" style="clear:both">Written by <i><? echo $comment[1]; ?></i> on <b><? echo $comment[2]; ?></b></div>
                                    <div class="commentholder" style="clear:both"><? echo $comment[0]; ?></div>
                                    <div style="clear:both"></div>
                                </div>
                              <? } ?>
        </div>

CSS:

.commentcover {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 90%;
    z-index: 500;

    padding:10px;
    background-color: #fff;
    opacity: 0;
    filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0);
    border-radius: 5px;
    text-align:center
}

.commentholder {
    position:absolute; top:10px; left:5%; z-index:400; width:90%;
}

我已经玩了很长一段时间了，但没有取得太大的成功..我不想在那里打滚动条:/

Here is a link to what I'm working on - 表格条目被扩展以显示多个单独的评论。鼠标悬停会导致覆盖的 div 在评论上淡出，并指示评论的日期和作者。只需切换打开顶部表格行并将鼠标悬停在评论上即可查看我在说什么(当然不能在 IE 中工作)。现在评论框的高度是固定的，但这不是一个理想的解决方案。你可以看到最长的评论已经有点溢出了。

大家怎么看？

Answer 1

提供绝对位置是将评论持有者从文档的正常流程中移除。因此，commentdiv 假装它不存在，因此文本“溢出”了包含的 commentdiv。

absolute

An element with position: absolute is taken out of the normal flow of the page and positioned at the desired coordinates relative to its containing block.

Since the absolutely positioned element is taken out of the normal flow, the normal document flow behaves as if the element is not there: it closes up the space it would take.

引用:http://www.quirksmode.org/css/position.html

编辑:

我不确定您要实现的重叠是什么，但是此 CSS 会将 commentcover 设置为 commentholder。我已经删除了 opacity:0 以显示它的外观。我让其他样式尽可能接近原始样式。

.commentdiv {
    padding:10px;
    border-radius: 5px;
    float:left; /* because the children are floated, floating the parent so height changes */
    width:100%; 
    margin-bottom:25px; 
    background-color:#FFF;
}

.commentcover {
    position:relative; /* so z-index still works */
    width: 90%;
    margin:0 auto;
    z-index: 500;
    padding:10px;
    background-color: #fff;
    border-radius: 5px;
    text-align:center;
}

.commentholder {
    position:relative; /* so z-index works */
    float:left;
    z-index:400; 
    width:90%;
    margin-top:-2em;
}