Div с текстовым полем, не находящимся на странице

Question

В настоящее время я создаю окно чата, и теперь я фокусируюсь на части стилизации. Я установил его атрибуты для любого размера окна. Но у меня есть проблема с div id="bottomPanel". Внутри этого div у меня есть текстовое поле, которое перекрывается и не подходит правильно. Я попытался изменить позицию на относительную, но не решает проблему: как я могу установить div bottomPanel и правильно ли нажать кнопку? 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

Put 2 инлайн дивы в нижней панели. Влево и вправо слева - текстовое поле, справа - кнопка.

Изменить #bottomPanel textarea относительно друг об этом и удалите абсолютные позиции.

Edit: Другой вариант мог бы просто поместить текстовое поле в той же DIV в области чата, и кнопки в том же DIV в списке пользователей.

Answer 3

Я думаю, что вы хотите достичь это Demo .Вы просто ошибка в организации

текстовое поле