html - 将固定元素定位在具有相同父宽度的父 div 底部

Question

如何将文本区域放置在父 div 的底部并使文本区域具有相同的宽度？

我现在遇到的问题是文本区域一直扩展到页面的右侧。

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>

这是我遇到的问题的一个简单示例:https://jsfiddle.net/hu45v46p/1/

如何用 html 和 css 解决这个问题？

Answer 1

你想给它 position: absolute 而不是 position: fixed。

默认情况下，它会比蓝色框稍大(因为有边框)。您可以使用 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>

希望对您有所帮助! :)