0

我有非常简单的标记：

<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 的高度。

4

2 回答 2

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;
}

这只是一个粗略的调整，您必须自己进行一些微调才能使其达到应有的位置。

于 2012-12-06T18:35:02.940 回答
0

使用 Opera hack。

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

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

HTML: ​ CSS: * { -moz-box-sizing:border-box; box-sizing：边框框；}

#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;
}
​
于 2012-12-06T17:46:53.863 回答