html - 带有文本区域的 Div 不在页面内

Question

我目前正在构建一个聊天窗口，现在我专注于样式部分。我已将其属性设置为适合任何窗口大小。但是我在使用 div id="bottomPanel" 时遇到了一些问题。在那个 div 里面，我有一个重叠的文本区域，并且不适合。我尝试将位置更改为相对位置，但这并没有解决问题:如何使 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% 宽和高的文本区域包裹在所需大小的 div 中。

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

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