Javascript 绝对定位溢出

好的，问题是：

我试图把两个元素（一个textarea和一个input）放在另一个元素的上面，第一个元素占据了所有剩余的空间

元素是绝对定位的

但是，当我尝试设置

left

属性（在任何属性上）时，最右边的部分似乎溢出。（将

设置为正确的

也没有任何帮助）

---

HTML:

<div id="the-wrapper">
    <textarea class="form-control"></textarea>
    <input id="search-input" type="text" class="form-control" placeholder="Insert a command &amp; press <Return>" name="cmd-term">
</div>

textarea {
  position: absolute; 
  top: 10px; 
  bottom:50px; 
  left: 10px; 
  overflow:visible;
}

input {
  height:34px; 
  position:absolute; 
  bottom:15px; 
  left:10px;
}

片段：

---

---

知道发生了什么吗？

表单控件类将

宽度

设置为

100%

。绝对定位元素的宽度基于其父元素。由于

#包装器

没有位置，因此宽度将基于

主体

您正在将其设置为

100%

，但使用

left

属性将其错放在

10px

的左侧

解决方案是重载

width

属性，用

calc

值“固定”左偏移：

.form-control {
    width: calc(100% - 10px);
}

---

查看

表单控件
类。它给出元素
宽度：100%
，并且您的定位将其从左侧偏移10px。这可能会把它推向边缘。您可能希望查看引导网格系统以帮助定位，它将更友好地使用
表单控件。编辑：@阴影井。。。很明显，我可以取消设置宽度，但是我如何进行绝对定位，堆叠元素，并让textarea在父级调整大小时“展开”？如果让textarea为100%宽度，相对定位（或无），并且输入为绝对，这将起作用。这将允许您将输入放置在textarea.@Dr.Kameleon的顶部。使用网格系统，您基本上可以将其放入一个div中，填充整行，然后将下一个元素放入下一行。Bootstrap可以无缝地处理大小调整，您接受的答案将解决问题，但我认为大多数开发人员都会同意这是一个有点草率的解决方案。一个词：真棒。非常感谢！：-）