Question

我需要一个内部div来向上滚动，当它绝对位于div的底部时，不能完全包含它。

这是代码：

的CSS：

#messages {
    float: left;
    width: 75%;
    height: 90%;
    position: relative;
    overflow-y:scroll;
}

#messages_inner {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

html：

<div id="messages">
    <div id="messages_inner">
        <div class="message">
            whatever
        </div>
        <div class="message">
            whatever
        </div>
        ...
    </div>
</div>

这是一个问题的小提琴： http://jsfiddle.net/pwneth/xkSN2/

Answer 1

working fiddle

将height: 100%;添加到要滚动的div /元素

    #messages_inner {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        height:100%;
    }

编辑：在查看您对其他答案的评论之后，我认为您不能这样做的原因是因为位置绝对div。首先，定位的绝对div应位于相对定位的div内。改变了布局，我认为这是问题

new working fiddle here

Answer 2

试试这段代码

#messages_inner {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
     height: 100%;/* add this*/
    }

Answer 3

喜欢这个？＆GT;＆GT;＆GT; AbsolutePositioned Div

如果没有请解释

   #messages {
        float: left;
        width: 75%;
        height: 90%;
        position: relative;
        overflow-y:scroll;
    }
    #messages_inner {
        position: absolute;
        top:0;
    }

绝对定位的内部元素不允许在相对定位的外部元素上滚动

3 个答案: