分区与textarea不在页面内

Question

我目前正在建立一个聊天窗口，现在我专注于造型部分。我已将其属性设置为适合任何窗口大小。但我对div id="bottomPanel"有一些问题。在那个div里面，我有一个重叠的textarea并且没有正确配合。我尝试将位置更改为相对位置，但它没有解决问题：如何使bottomPanel div正确匹配并使按钮位于右侧？ JSFIDDLE

这样的事情：

html, body {
    width: 100%;
    height: 100%;
}
body {
    position: relative;
}
#wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid #333;
}
#upperPanel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 100px;
}
#chat {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 200px;
    background: #666;
    overflow: auto;
}
#friends {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    right: 0;
    background: #999;
    overflow: auto;
}
#friends ul {
    text-align: right;
}
#bottomPanel {
    height: 100px;
    background: #EEE;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
#bottomPanel textarea {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 120px;
    resize: none;
}
#bottomPanel input[type=submit] {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    width: 100px;
}
textarea {
    width: 100%;
    height: 100%;
    position: relative;
}

Answer 1

以下是Updated Fiddle

The textarea does not seem to work with absolute position + right + bottom sizing technique。解决方案是使用100％宽和高的textarea包裹在所需大小的div内。

在我的示例中，我回收了#bottomPanel而不是添加新的div。我调整了填充，使其内部尺寸与textarea的所需大小相匹配。重要的规则是：

#bottomPanel {
    background: #EEE;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /* CHANGED */
    height: 80px;
    padding: 10px 120px 10px 10px;
}
#bottomPanel textarea {
    resize: none;
    /* CHANGED */
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    height: 100%;
}
#bottomPanel input[type=submit] {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    width: 100px;
}

Answer 2

在底部面板中放置2个内联div。左侧和右侧是用于textarea，右侧是按钮。

将#bottomPanel textarea更改为亲戚并删除绝对位置。

修改 另一种选择可能是将textarea放在与聊天区域相同的div中，并将该按钮放在与用户列表相同的div中。

Answer 3

我认为你想要实现的是Demo。你在安排textarea时犯了一个错误