Размещение текстового поля и формы в нижней части div искажает ширину текстового поля

Question

Я пытаюсь разместить текстовое поле и форму с типом ввода в нижней части страницы. Моя задача состоит в том, что я могу поместить обе их в нижнюю часть страницы, но ширина текстовой области искажается. Это мой код:

.msg_input { 
 
    width: 100%; 
 
    border: 1px solid white; 
 
    border-top: 1px solid #DDDDDD; 
 
    -webkit-box-sizing: border-box; 
 
    /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; 
 
    /* Firefox, other Gecko */ 
 
    box-sizing: border-box; 
 
} 
 
.goBottom { 
 
    position: fixed; 
 
    bottom: 0; 
 
}

<div class="goBottom"> 
 
    <textarea placeholder="...type here" class="msg_input" rows="4"> 
 
    </textarea> 
 

 
    <form method="post" action="/logout"> 
 
    <input class="btn btn-link" type="submit" value="Exit" /> 
 
    </form> 
 
</div>

ширина текстового поля не принимает полную ширину 100% страницы. Пожалуйста, что может быть неправильным?

Answer 1

Update следующих CSS:

.goBottom{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

Причина это должно работать: Неподвижный элемент позиции, кажется, не в полные ширины. Следовательно, это гарантирует, что это так. textarea принимает всю ширину элемента goBottom.