Question

好的，问题在于：

我试图把两个元素（一个textarea和一个输入），一个放在另一个上面，第一个占用剩下的所有空间。

元素位于absolute。

然而，当我尝试设置left属性（在其中任何一个上）时，最右边的部分似乎溢出。（设置right一个也没有帮助。）

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课程将width设为100%。绝对定位元素的宽度基于其父元素。由于#the-wrapper没有位置，因此宽度将基于body。

您已将其设置为100%，但10px错误地将其放在左侧，并使用left属性。

解决方案是重载width属性，＆＃34;修复＆＃34;带有calc值的左侧偏移量：

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

http://www.bootply.com/vnEI0vl1d5

溢出绝对定位

1 个答案: