CODEWITHSUNDEEP
htmlcss
Vivendi
Vivendi

Reputation: 20997

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

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?

Upvotes: 1

Views: 62

Answers (4)

VXp
VXp

Reputation: 12058

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>

Upvotes: 1

kawnah
kawnah

Reputation: 3404

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>

Upvotes: 1

izulito
izulito

Reputation: 477

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>

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

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! :)

Upvotes: 2

Related Questions