javascript - 绝对定位溢出

Question

好的，问题来了:

我试图将两个元素(一个文本区域和一个输入)放在另一个之上，第一个占据所有剩余空间。

元素是绝对定位的。

但是，当我尝试设置 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>

CSS:

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

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

片段: http://www.bootply.com/MAkCQNtiXY

---

知道发生了什么吗？

Answer 1

.form-control 类将宽度设置为100%。绝对定位元素的宽度基于其父元素。由于 #the-wrapper 没有位置，宽度将基于 body。

您将其设置为 100%，但使用 left 属性将其错位到左侧 10px。

一个解决方案是重载 width 属性，用 calc 值“修复”左边的偏移量:

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

http://www.bootply.com/vnEI0vl1d5