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

Question

如何将textarea放置在父div的底部并使textarea的宽度相同？

我现在遇到的问题是textarea一直扩展到页面的右侧。

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: fixed，您想要给它position: absolute。

默认情况下，它会略大于蓝色框（因为边框）。您可以使用width: calc(100% - 6px)

来满足此要求

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）

Answer 2

查看以下代码。

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将position div 的absolute 属性的值更改为.bottom添加了一些基本的 CSS 浏览器重置* {margin: 0; padding: 0; box-sizing: border-box}，它很适合textarea div 中的.middle：

* {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>

Answer 4

position: fixed;与您的视口相关，这就是您为textarea获取这些结果的原因。

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;