Question

我的标记非常简单：

<div id="container">
    <div id="content"></div>
    <div id="ta-container">
        <div id="gripper"></div>
        <textarea></textarea>
    </div>
</div>

我的样式就像基本的聊天窗口一样。请在此处查看代码：http://jsfiddle.net/pavek/rdxN5/3/

这在FF，Chrome，IE中看起来非常好，但不在Opera （12.11，现在最新）。最令人困惑的是容器中两个绝对定位的元素如何相互影响 - 我无法理解。

我想看看这个问题的可能解决方案。注意：我更愿意避免操纵div＃content的 height 。

Answer 1

我没有你的原因，但你可以通过取消边距并使顶部/右边/底部/左边的属性反映你想要边缘的位置来纠正它：

http://jsfiddle.net/rdxN5/4/

#content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    margin: 5px 5px 0 5px;
    border: 1px solid red;
}

这只是一个粗略的调整，你必须自己做一点微调才能把它调到应有的位置。

Answer 2

使用Opera hack。

但是，你为什么要使用绝对位置？

试试这个：http://jsfiddle.net/liccyfuentes/KbxJK/

HTML： CSS： * { -moz-box-sizing：border-box; box-sizing：border-box; }

#container {
    margin: 20px;
    width: 200px;
    padding:5px;
    min-height: 300px;
    border: 1px solid blue;
    float:left;            
}

#main-content {
    min-height:248px;
    border:1px solid red;
    float:left;
    width:188px;
}
textarea {
    float:left;
    width:188px;
    margin-top: 5px;
    resize: none;
    border: 1px solid green;
}

Opera（仅限） - 绝对定位的子元素的边缘将其推向下一个兄弟，也绝对定位

2 个答案: