元素不会保持固定

Question

我遇到了一个常见问题，即resize-icon fixed的{​​{1}}元素（bottom）最终“移动”到位置，如果或何时使用灰色三角形本身（right）来操纵div input-area的大小。

是否存在黑客攻击甚至修复此问题？

显然我可以编写一些JS来解决这个问题，但我希望它只能用HTML和CSS来解决/修复。

重现问题的步骤：

1. 选择蓝色文字区域。
2. 按一次输入以便文本区域扩展。
3. 通过灰色三角形手动调整窗口大小。
4. 再次输入一堆。

Here is a codepen.

resize-icon

const resizeIcon = document.getElementById('resize-icon'),
      inputArea  = document.getElementById('input-area')
let   cursorX,
      cursorY,
      inputW,
      inputH

resizeIcon.onmousedown = function(e){
  document.addEventListener('mousemove', calculate)
  cursorX = e.clientX
  cursorY = e.clientY
  inputW  = inputArea.offsetWidth
  inputH  = inputArea.offsetHeight
}

const calculate = (e) => {
  xDifference = (e.clientX - cursorX) * 2 // if text box is centered
  yDifference = e.clientY - cursorY
  resize(xDifference, yDifference)
}

const resize = (x, y) => {
  width  = inputW + x + 'px'
  height = inputH + y + 'px'
  inputArea.style.width  = width
  inputArea.style.height = height
}

document.onmouseup = function(){
  document.removeEventListener('mousemove', calculate)
}

body {
  margin: 0;
}

#input-area {
  width: 20vw;
  max-width: 90vw;
  min-width: 10vw;
  height: auto; /* was 20vh which caused even more problems */
  min-height: 20vh;
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  box-sizing: border-box;
  background: #f2f2f2;

  border:solid red 1px; /**/
}

#user-input {
  width: 100%;
  height: auto;
  padding: 10px;
  font-family: arial;
  white-space: pre-wrap;
  font-size: 24px;
  box-sizing: border-box;

  border:solid blue 1px; /**/
}

#user-input:focus {
  outline: none;
}

#resize-icon {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  transform: rotate(45deg) translate(50%, 50%);
  transform-origin: 100% 100%;
  background: #ccc;
}

关于发生了什么的解释：

所以，经过一些更多的摆弄，我相信我明白究竟发生了什么。在您已经利用其<div id="input-area"> <div id="user-input" contenteditable="true"></div> <div id="resize-icon"></div> </div>属性后手动调整input-area的大小（例如，按下输入多次），height: auto仍然大于user-input并且此差异仍然存在即使input-area和input-area由于其user-input属性而会同时增加大小。换句话说，在手动调整height: auto大小然后再次利用两个元素的input-area属性后，两个元素之间的实际高度差异仍然存在和{{1相对于由用户手动确定的height: auto的新高度，{}变为resize-icon。 这里的内容是，一旦您手动调整fixed的大小，然后利用它的input-area属性及其子级，高度相对于彼此的差异仍然存在（即1：3， 2：4,3：5,4：6 ......）。

半生不熟的解决方案

我仍然有兴趣了解任何纯HTML和CSS的变通方法。一种解决方案是为input-area设置height: auto和overflow-y: scroll，但这不是一个好的解决方案，因为我相信从浏览器到浏览器的滚动条的宽度会有所不同。

Answer 1

这可以使用css和html实现。

1）确保父母div不是position: relative

2）添加使用此css：

    `position: fixed; bottom: 0; height: 40px; background: #fa0;`