Position fixed element at bottom of parent div with same parent width - html

Question

How can I position a textarea at the bottom of the parent div and also make the textarea the same width?
The problem I have now is that the textarea expands all the way to the right side of the page.
Html
html,
body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
Here is a simple example of the problem that I have: https://jsfiddle.net/hu45v46p/1/
How can this be solved with html and css?

Answer 1

Instead of position: fixed, you want to give it position: absolute.
By default, it will be slightly larger than the blue box (because of the borders). You can accommodate for this with width: calc(100% - 6px):
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
width: calc(100% - 6px);
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
Hope this helps! :)

Answer 2

Check out the code below.
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.blue {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<div class="blue">
<p>Textarea should be placed at bottom of the 'blue' div, with the same width</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>
</div>

Answer 3

position: fixed; is relative to your viewport which is why you're getting those results for the textarea.
html,body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
/*fixed to absolute*/
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>

Answer 4

Changed the value of the position property to absolutefor the .bottom div and added some basic CSS browser reset * {margin: 0; padding: 0; box-sizing: border-box} which fits the textarea nicely inside the .middle div:
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {
height: 90%;
}
.container {
position: relative;
margin-left: 100px;
width: 500px;
height: 100%;
border: 1px solid red;
}
.middle {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
height: 100%;
border: 1px solid blue;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
}
<div class="container">
<div class="middle">
<p>
Textarea should be placed at bottom of the 'blue' div, with the same width
</p>
<textarea class="bottom" placeholder="Textarea..."></textarea>
</div>
</div>